1

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 中，我将如何修改它，它将更改 LINK 3（父链接）的文本颜色。

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

4

4 回答 4

2

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

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

于 2013-07-20T04:36:32.663 回答
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/

如果您需要不同的子 li 来触发父级上的不同颜色，据我所知，这是不可能通过 css 完成的，但可以使用 javascript 轻松完成。让我知道这是否是您的意图，我可以为此提供 javscript 帮助。

于 2013-07-20T04:39:48.840 回答
0

在玩了一点代码之后，我终于找到了我正在寻找的解决方案。我将下面的解决方案粘贴到代码中，并附上 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 小提琴：http: //jsfiddle.net/Nz5Gq/1/

于 2013-07-20T05:04:12.590 回答
0 
li:hover
{
color:blue;
cursor:pointer;
}
li:hover li
{
color:Red;
}
li ul li:hover
{
color:Red;
cursor:pointer;
}
于 2013-07-20T06:38:53.413 回答