CSS - 應用背景色標籤

-1

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>

當我將鼠標懸停在鏈接只有背景周圍的鏈接改變顏色，但我想整個的選項卡背景改變。我怎樣才能做到這一點？

來源

2017-08-29 adam78

刪除a：懸停並離開.inactiveHdr：懸停或tabHdr：懸停 – user5014677

或者將填充移動到'div.tabHdr a' –

您希望只在懸停在鏈接上而不在任何位置時更改背景顏色在div？ –

嘗試在這個片段

.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>

來源

2017-08-29 10:20:12

嘗試改變

.inactiveHdr a:hover {

要

.inactiveHdr:hover {

編輯，如果你想刪除的鏈接的下劃線自然，你需要保持：

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

來源

2017-08-29 10:18:39 kinggs

所以只需將hover移至包含div：

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

來源

2017-08-29 10:19:04

當孩子是父母懸停還處於懸停狀態

.inactiveHdr:hover { 
    background: #eee; 
}

但現在，當您將鼠標懸停選項卡，但你不能在鏈接點擊無懸停鏈接所以我建議去掉外層div和顯示切換鏈接

display: block;

就像這個小提琴： https://jsfiddle.net/45nmv9zw/

來源

2017-08-29 10:19:57

-1

替換此

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

而不是

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

來源

2017-08-29 10:24:50 santhosh

CSS - 應用背景色標籤

回答

相關問題