当任何孩子被徘徊时更改CSS下拉菜单的颜色 [英] Change CSS dropdown menu color when any child is hovered
问题描述
我有一个基本的CSS下拉菜单，如下所示： http://jsfiddle.net/qfTt3/（与下面相同的代码）
HTML
< ul id = 主导航 >
< li class =active>< a href ='＃'>计划< / a>
< ul>
< li>< a href ='＃'>子链接1< / a>< / li>
< li>< a href ='＃'> Sub Link 2< / a>< / li>
< / ul>
< / li>
< li>< a href ='＃'>运作方式< / a>< / li>
< li>< a href ='＃'>关于< / a>
< ul>
< li>< a href ='＃'>子链接1< / a>< / li>
< li>< a href ='＃'> Sub Link 2< / a>< / li>
< li>< a href ='＃'> Sub Link 3< / a>< / li>
< li>< a href ='＃'>子链接4< / a>< / li>
< / ul>
< / li>
< li>< a href ='＃'>推荐书< / a>
< ul>
< li>< a href ='＃'>子链接1< / a>< / li>
< li>< a href ='＃'> Sub Link 2< / a>< / li>
< li>< a href ='＃'> Sub Link 3< / a>< / li>
< li>< a href ='＃'>子链接4< / a>< / li>
< / ul>
< / li>
< li>< a href ='＃'>常见问题< / a>< / li>
< li>< a href ='＃'>联络人< / a>< / li>
< / ul>
CSS
＃main-navigation {
background：#FFF;
padding：0;
保证金：0;
list-style-type：none;
height：100px;
float：right;
font-size：18px;
}
＃main-navigation li {
float：left;
}
＃main-navigation> li {
line-height：100px;
背景颜色：#FFF;
margin-left：10px;
}
＃main-navigation> li> ul> li {
line-height：30px;
背景：#FFF;
margin-left：0px;
border-bottom：1px solid＃999;
职位：亲属;
z-index：100;
}
＃main-navigation li a {
padding：0px 12px;
display：block;
text-decoration：none;
颜色：＃6d6e71;
}
＃main-navigation ul {
position：absolute;剩余
：-9999px;
top：-9999px;
list-style-type：none;
保证金：0;
}
＃main-navigation li：hover {
position：relative;
背景：＃10b794;
}
＃main-navigation li a：hover {
color：#FFF;
}
＃main-navigation li：hover ul {
left：0px;
top：100px;
背景：＃10b794;
padding：0px;
}
＃main-navigation li：hover ul li a {
padding：5px;
display：block;
width：168px;
text-indent：15px;
背景：＃10b794;
}
＃main-navigation li：hover ul li a：hover {
color：#FFF;
}
＃main-navigation li.active {
border-bottom：4px solid＃10b794;
height：96px;
$ b 正如您所看到的，当单个项目为盘旋。我想要做的是，如果菜单/子菜单的任何部分都是，则主< li> 的文本颜色以及子菜单项都变为白色盘旋。如果有人在菜单中的计划上悬停，则所有子菜单链接也应该有白色文本。如果这可能与CSS选择器单独或我需要看看一个JS解决方案？
解决方案您想要更改：
＃main-navigation li a：hover {
color：#FFF;
$ / code $ / pre
＃main-navigation li：hover>一个{
颜色：#FFF;
}
基本上，你需要 a 元素的颜色在您悬停在列表项上时发生更改。这样，当您将鼠标悬停在其他子菜单项上时，您仍然悬停在包含子菜单的 li 上。
我使用子选择器> ，以便当您将鼠标悬停在主菜单项链接上时，子菜单项链接不受影响。
要将计划子菜单链接的颜色设置为目标，您应该将样式应用于课程以专门针对它们。由于您已经有了专门针对计划的课程（ .active ），因此我只是将其用于演示目的。
< CSS：
＃main-navigation li：hover> a，＃main-navigation .active：hover a {
color：#FFF;
}
当目标 .active ，这样当鼠标悬停在主链接上时，它将使所有子元素 a 元素为白色。
I have a basic CSS dropdown menu that looks like this: http://jsfiddle.net/qfTt3/ (same code below)
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;
}
As you can see, the text color changes to white when and individual item is hovered over. What I would like to do is have the text color of both the main <li> as well as the submenu items change to white if any part of that menu/submenu is hovered over. If someone hovers over 'Plans' in the menu, all the submenu links should have white text as well. If this possible with CSS selectors alone or do I need to look into a JS solution?
解决方案 You want to change:
#main-navigation li a:hover {
color: #FFF;
}
to be:
#main-navigation li:hover > a {
color: #FFF;
}
Basically, you want the a element's color to change when you are hovered over the list item. That way, when you hover over other submenu items, you're still hovering over the li containing the submenu.
I use the child selector > so that the submenu item links are not affected when you're hovering over the main menu item link.
To target the Plans submenu link colors, you should apply the styling to a class to specifically target them. Since you already have a class specifically on Plans (.active), I'll just use that for demonstration purposes.
CSS:
#main-navigation li:hover > a, #main-navigation .active:hover a {
color: #FFF;
}
I get rid of the child selector when targeting .active so that it makes all child a elements white when hovering over the main link.
这篇关于当任何孩子被徘徊时更改CSS下拉菜单的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
