javascript - css 选择器问题，如何在子 ul 聚焦时更改父 li 的字体颜色

Question

好吧，在过去的两个小时里，我一直在用头撞墙，我终于放弃了。

我有一个无序列表，在顶层没有背景，文本颜色为 #fff。滚动到背景时，背景变为 #fff，文本颜色变为 #000。我还有 ul 的 child ，他们的背景为#fff，文本颜色为 #000。

现在我需要知道的是，当子 ul 元素打开但顶级链接未被鼠标悬停时，您如何设置顶级文本颜色变化的样式。一旦我将鼠标从顶层链接移到子 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
}

这是我认为最适合场景的标记。菜单 ul li 没有带有文本颜色#ffffff 的背景。当用户滑过“关于”时，背景变为#ffffff，文本变为#000000。下拉列表会下降并显示 .children ul/li's。也有相同的 bg/text 颜色。一旦用户将鼠标从父 li 链接上移开，父 li 链接就会变回白色背景上的白色字体。但 children 保持白色 bg..

只要用户悬停/点击 child ，我就需要字体变成黑白 bg。

Answer 1

检测子点击时应该使用jquery的Parents函数。

当你检测到点击时 - 你去它的 parent (他在那里上课) - 然后

你给父级样式...

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