CSS - 私は、次のHTML持っタブ

Question

に背景色を適用します。私はリンク上のリンクの変更色の周りの背景のみを置くが、私は全体のタブの背景をしたい場合は

div.tabHdr { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    margin-right: 5px; 
 
    border-color: #ddd #ddd transparent; 
 
    padding: 10px; 15px; 
 
    width: auto; 
 
} 
 

 
div.activeHdr { 
 
    background: #FFF; 
 
    color: #555; 
 
    
 
} 
 

 
div.inactiveHdr { 
 
    background: #FFF; 
 
} 
 

 
.inactiveHdr a:hover { 
 
    background: #eee; 
 
    text-decoration: none; 
 
}

<div class="tabHdr inactiveHdr"> 
 
    <a href="/" title="">my link</a> 
 
</div>

を変更する。どうすればこれを達成できますか？

Answer 1

はこのスニペットをしてみてください

.inactiveHdr:hover { 
    background: #eee; 
} 
.inactiveHdr:hover a { 
    text-decoration: none; 
} 

div.tabHdr { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    margin-right: 5px; 
 
    border-color: #ddd #ddd transparent; 
 
    padding: 10px; 15px; 
 
    width: auto; 
 
} 
 

 
div.activeHdr { 
 
    background: #FFF; 
 
    color: #555; 
 

 
} 
 

 
div.inactiveHdr { 
 
    background: #FFF; 
 
} 
 

 
.inactiveHdr:hover { 
 
    background: #eee; 
 
} 
 
    .inactiveHdr:hover a { 
 
    text-decoration: none; 
 
}

<div class="tabHdr inactiveHdr"> 
 
    <a href="/" title="">my link</a> 
 
</div>

Answer 2

編集

.inactiveHdr:hover { 

に

.inactiveHdr a:hover { 

を変更してみてください、あなたがリンク上の自然下線を削除したい場合、あなたは維持する必要があります：

.inactiveHdr a:hover { 
    text-decoration:none; 
} 

Answer 3

ので、 hoverを含むものにdiv：

を移動してください

.tabHdr:hover { 
    background: #eee; 
    text-decoration: none; 
} 

Answer 4

子供がホバー親がホバー状態でも

.inactiveHdr:hover { 
    background: #eee; 
} 

いますが、タブが、無ホバーリンクを置くと、私は外側のdivを削除しての表示を変更示唆だから今、あなたがリンクをクリックすることはできませんですこのバイオリンのよう

display: block; 

へのリンク： https://jsfiddle.net/45nmv9zw/

Answer 5

この

div.tabHdr:hover { 
background: #eee; 
text-decoration: none; 
} 

代わりの

.inactiveHdr a:hover { 
    background: #eee; 
    text-decoration: none; 
} 

を交換