a:hover, li:hover {
color: red;
}
<ol>
<a href="#"><li>Main1</li></a>
<a href="#"><li>Main2</li>
<a href="#"><li>Main3
<ol>
<a href="#"><li>Sub1</li></a>
<a href="#"><li>Sub2</li></a>
<a href="#"><li>Sub3</li></a>
</ol>
</li></a>
<a href="#"><li>Main4</li></a>
<a href="#"><li>Main5</li></a>
<a href="#"><li>Main6</li></a>
</ol>
我有一个嵌套的订单列表。
当我将鼠标悬停在每个项目上时,文本将变为红色。
但是,当我将鼠标悬停在子项目上时,主项目的数量也会变为红色。
(例如,当我将鼠标悬停在sub1上时,main3的数字“ 3”也将变为红色)
如何解决?难道我做错了什么?
最佳答案
您的代码中有几个问题。
1:您需要关闭Main2周围的锚标记,否则从技术上讲,页面的其余部分都是该链接的一部分。
2:我可能是错的,但是我可以肯定地说,除了LI之外,您不允许其他任何孩子是OL或UL的孩子(因此应该是<li><a>linked list item</a></li>
而不是<a><li>linked list item</li></a>
)。 (请参阅嵌套列表上对该问题的可接受答案:Proper way to make HTML nested list?)
3:您的CSS规则说:“如果我将鼠标悬停在列表项上,则将其设为红色。如果将我悬停在锚点上,则将其设为红色。”由于您的子列表嵌套在主列表中的列表项中,因此当您将鼠标悬停在子列表上时,从技术上讲,您将鼠标悬停在主列表中的第三个列表项上(请参阅我为您做的这个小提琴,以演示我的意思:http://jsfiddle.net/pah3gstn/2/)。
这也意味着,如果您单击那些子链接中的其中一个,并且之前已设置了锚标记,它们将全部单击,到达Main3应该去的链接。
4:固定列表结构(第1、2和3个问题)后,您可以将CSS更改为a:hover {color:red;}
,因为这样,您只需要更改悬停的特定链接上的颜色即可。
我已为您修复了所有这些问题,因此您可以在这里看到它的工作:http://jsfiddle.net/pah3gstn/
关于html - 鼠标悬停时如何使嵌套元素的文本变为红色?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31464519/