懸停子元素時更改父級的背景

所以我有以下菜單。懸停子元素時更改父級的背景

<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Services</a> 
    <ul> 
     <li><a href="">Polish</a></li> 
     <li><a href="">Another one</a></li> 
     <li><a href="">Another one</a></li> 
    </ul> 
    </li> 
    <li><a href="#">More info</a></li> 
    <li><a href="#">Contact</a></li> 
</ul>

關於1日的鏈接我有不同的懸停背景。當我懸停「服務」第二彈出，當我想要從第二個項目懸停我想從第一個鏈接保持活躍。

就像當我懸停服務>波蘭我希望我的服務的背景保持像它的懸停。僅在CSS中才有可能嗎？

來源

2013-10-16 paz

好吧，我做了從頭開始這件事情，你可以檢查出來

Demo

Demo 2（含background在父）

.menu > li { 
    display: inline-block; 
    position: relative; 
} 

.menu > li > ul { 
    display: inline-block; 
    position: absolute; 
    display: none; 
} 

.menu > li:hover > ul { 
    display: block; 
} 

.menu > li:hover a { 
    color: #f00; 
    /* This selector will color all anchors nested inside li, 
     to be specific, please read the note below */ 
}

在這裏的關鍵是選擇這一個，.menu > li:hover a，我針對a元素嵌套在li內。

注：在演示1，我已經錯過了>直系後裔選擇，一定要使用它，讓您選擇具體。因此，改變這種 .menu > li:hover a到.menu > li:hover > a - New Demo

來源

2013-10-16 10:54:09

試試這個在你的CSS ..

ul ul:hover + a { color: red; }

Demo

來源

2013-10-16 10:56:17

像這樣的事情？

DEMO

<ul class="menu"> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Services</a> 
    <ul> 
     <li><a href="">Polish</a></li> 
     <li><a href="">Another one</a></li> 
     <li><a href="">Another one</a></li> 
    </ul> 
</li> 
<li><a href="#">More info</a></li> 
<li><a href="#">Contact</a></li>

來源

2013-10-16 11:05:08 MadKotai47

懸停子元素時更改父級的背景

回答

相關問題