使用 CSS，<li>如果子标签悬停在上面，如何更改父<li>标签的字体颜色

Question

HTML:

<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3
   <ul>
   <li>link 3.1</li>
   <li>link 3.2</li>
   </ul>
</li>
</ul>

如果链接3.1或3.2悬停在CSS中，我将如何修改它，它将更改链接3（父链接）的文本颜色。

我希望我把这件事做得足够简单，并以最好的方式提问。我知道如何独立地更改每个事物的文本颜色，只是不知道如何更改父li标记的文本颜色。

Answer 1

不幸的是，目前无法使用CSS选择元素的父级，这是您最终需要做的。您需要使用javascript。

请参阅这个非常类似（范围内）的问题，并了解使用jQuery实现的快速解决方案：是否有CSS父选择器？

Answer 2

如果我理解你的问题：你可以针对父项li，然后覆盖子项的颜色。

<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3
   <ul>
   <li>link 3.1</li>
   <li>link 3.2</li>
   </ul>
</li>
</ul>
li:hover{
    color:blue;
}
li > ul > li{
    color: black;
}

这是一个jsfiddle：http://jsfiddle.net/eedWZ/1/

如果您需要不同的sub-li来触发父项上的不同颜色，据我所知，通过css是不可能的，但使用javascript可以很容易地完成。如果这是你的意图，请告诉我，我可以帮你写javscript。

Answer 3

在玩了一点代码之后，我终于找到了我想要的解决方案。我将下面的解决方案粘贴在代码和JS fiddle的链接中。

HTML

<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3
   <ul>
   <li>link 3.1</li>
   <li>link 3.2</li>
   </ul>
</li>
</ul>

CSS：

li:hover { color: red; }
li:hover li { color: black; }
li li:hover { color: red; }

JS Fiddle：http://jsfiddle.net/Nz5Gq/1/

Answer 4

li:hover
{
color:blue;
cursor:pointer;
}
li:hover li
{
color:Red;
}
li ul li:hover
{
color:Red;
cursor:pointer;
}