[英]Change CSS dropdown menu color when any child is hovered
我有一個基本的CSS下拉菜單,如下所示: http : //jsfiddle.net/qfTt3/ (以下相同代碼)
的HTML
<ul id="main-navigation">
<li class="active"><a href='#'>Plans</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
</ul>
</li>
<li><a href='#'>How it Works</a></li>
<li><a href='#'>About</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
<li><a href='#'>Testimonials</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
<li><a href='#'>FAQ</a></li>
<li><a href='#'>Contact</a></li>
</ul>
的CSS
#main-navigation {
background: #FFF;
padding: 0;
margin: 0;
list-style-type: none;
height: 100px;
float: right;
font-size: 18px;
}
#main-navigation li {
float: left;
}
#main-navigation>li {
line-height: 100px;
background-color: #FFF;
margin-left: 10px;
}
#main-navigation>li>ul>li {
line-height: 30px;
background: #FFF;
margin-left: 0px;
border-bottom: 1px solid #999;
position: relative;
z-index: 100;
}
#main-navigation li a {
padding: 0px 12px;
display: block;
text-decoration: none;
color: #6d6e71;
}
#main-navigation ul {
position: absolute;
left: -9999px;
top: -9999px;
list-style-type: none;
margin: 0;
}
#main-navigation li:hover {
position: relative;
background: #10b794;
}
#main-navigation li a:hover {
color: #FFF;
}
#main-navigation li:hover ul {
left: 0px;
top: 100px;
background: #10b794;
padding: 0px;
}
#main-navigation li:hover ul li a {
padding: 5px;
display: block;
width: 168px;
text-indent: 15px;
background: #10b794;
}
#main-navigation li:hover ul li a:hover {
color: #FFF;
}
#main-navigation li.active {
border-bottom: 4px solid #10b794;
height: 96px;
}
如您所見,當鼠標懸停在單個項目上時,文本顏色變為白色。 我想做的是將主<li>
以及子菜單項的文本顏色都更改為白色(如果該菜單/子菜單的任何部分都懸停了)。 如果有人將鼠標懸停在菜單中的“計划”上,則所有子菜單鏈接也應具有白色文本。 如果僅使用CSS選擇器可能實現此目的,還是需要研究JS解決方案?
您要更改:
#main-navigation li a:hover {
color: #FFF;
}
成為:
#main-navigation li:hover > a {
color: #FFF;
}
基本上,你想要的a
,當你懸停在列表項元素的顏色改變。 這樣,當您將鼠標懸停在其他子菜單項上時,仍將鼠標懸停在包含該子菜單的li
。
我使用子選擇器>
這樣當您將鼠標懸停在主菜單項鏈接上時,子菜單項鏈接不會受到影響。
要定位“計划”子菜單鏈接顏色,應將樣式應用於類以專門定位它們。 由於您已經有一個專門針對Plans( .active
)的類,因此我僅將其用於演示目的。
CSS:
#main-navigation li:hover > a, #main-navigation .active:hover a {
color: #FFF;
}
當定位.active
時,我.active
了子選擇器,這樣當懸停在主鏈接上時,它將所有子元素a
白色。
您必須將此添加到您的CSS
#main-navigation > li:hover > ul > li > a {
color: #FFF;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.