CSS选择器问题，如何改变父li的字体颜色时，子ul的焦点

css selector question, how to change font colover of parent li when child ul is focused

本文关键字：字体 li 颜色 焦点 ul 问题 选择器 何改变 改变 CSS      更新时间：2023-09-26

好吧，在过去的两个小时里，我一直在为这件事绞尽脑汁，最后我终于放弃了。

我有一个无序列表，在顶层没有背景，文本颜色为#fff。当滚动到背景变成#fff，文字颜色变成#000。我也有孩子的ul的背景为#fff和文字颜色为#000。

现在我需要知道的是，当子ul元素打开，但顶层链接没有鼠标悬停时，你如何样式的文本颜色变化在顶层。我不能让它强制顶级的li's留在#000(我得到了背景坚持)，只要我把我的鼠标从顶级链接移动到子ul顶级文本回到#fff。

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li>About
<ul class="children">
<li><a href="#">About Us</a></li>
</ul>
</li>
</ul>
</div>
.menu ul li{
color: #ffffff;
text-decoration:none;
}
.menu ul li:hover{
color:#000000
background-color:#ffffff;
}
.children{
background-color:#ffffff;
color:#000000
}

这是我认为最适合的标记。菜单中没有文本颜色为#ffffff的bg。当用户滚动"About"时，背景变为#ffffff，文本变为#000000。下拉菜单掉下来，露出了孩子们的ul/li。它们也有相同的bg/text颜色。一旦用户将鼠标从父li链接上移开，父li链接就会回到白色背景上的白色字体。但是孩子们一直是白色的……

我需要字体变成黑色和白色bg只要用户悬停/点击一个孩子。

当你检测到子点击时，你应该使用jquery的Parents函数

，当你检测到点击-你去到它的父级(他有一些类)-然后

给父元素样式…

http://jsbin.com/ehuke4/25/edit

也许给每组元素一个共享类，然后使用jQuery为类的所有成员设置css。因此，对于menu1, menu2等添加以下代码:

<>之前(".menu_1").hover(美元//鼠标悬停函数(){$ (" .menu_1) . css("背景颜色","红");}，//on mouseout函数(){$ (" .menu_1) . css("背景颜色","白色");})；

你的css少了一个分号:

.menu ul li:hover{
   color:#000000; <!-- insert this semi-colon -->
   background-color:#ff0;
 }
相关文章：