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>

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

我希望我能够做到这一点，并尽可能以最佳方式提出要求。我知道如何独立改变每件事的文字颜色，只是不知道如何改变父李标签的文字颜色。

Answer 1

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

查看这个非常类似（范围内）的问题以及使用jQuery实现的快速解决方案：Is there a CSS parent selector?

Answer 2

如果我理解你的问题：你可以定位父李，然后覆盖孩子的颜色。

<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小提琴。

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小提琴：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;
}

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

4 个答案: