Question

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>

我有一个嵌套的订单列表。当我将鼠标悬停在每个项目上时，文本将变为红色。但是，当我将鼠标放在子项目上时，main的数量也将变为红色。

（例如，当我将鼠标悬停在sub1上时，main3的数字“3”也将变为红色）

如何解决？我做错了什么？

Answer 1

您的代码中存在一些问题。

1：您需要关闭Main2周围的锚标记，否则从技术上讲，页面的其余部分都是该链接的一部分。

2：我可能是错的，但是我很确定你不会被允许作为OL或UL的孩子，除了LI（因此它应该是<li><a>linked list item</a></li>而不是<a><li>linked list item</li></a>）。（请参阅嵌套列表中对此问题的接受答案：Proper way to make HTML nested list?）

3：你的CSS规则说＆＃34; 如果我将鼠标悬停在列表项上，则将它们设为红色。此外，如果我将鼠标悬停在锚点上，请将它们设为红色。＆＃34;由于您的子列表嵌套在主列表的列表项中，当您将鼠标悬停在子列表上时，您在技术上将鼠标悬停在主列表中的第3个列表项上（请参阅我为您做的小提示，以证明我的意思：http://jsfiddle.net/pah3gstn/2/）。

这也意味着如果您点击其中一个子链接以及之前设置锚标记的方式，他们都会点击进入Main3应该去的链接。

4：修复列表结构（问题1,2和3）后，您可以将css更改为a:hover {color:red;}，因为这样您只需更改特定链接上的颜色＆＃ 39;重新盘旋。

我已经为您解决了所有这些问题，因此您可以在此处看到它：http://jsfiddle.net/pah3gstn/

Answer 2

为什么不将DOM稍微更改为此（仅匹配起始和结束标记）：

<ol>
  <a href="#"><li>Main1</li></a>
  <a href="#"><li>Main2</li></a>
  <a href="#"><li>Main3</li></a> <!-- closed list element here-->
    <!-- this list is standalone element, not included inside li -->
    <ol>
        <a href="#"><li>Sub1</li></a>
        <a href="#"><li>Sub2</li></a>
        <a href="#"><li>Sub3</li></a>
    </ol>
  <a href="#"><li>Main4</li></a>
  <a href="#"><li>Main5</li></a>
  <a href="#"><li>Main6</li></a>
</ol>

仅在链接上应用颜色：

a:hover {
  color: red;
}

fiddle

Answer 3

这个怎么样？它不会改变你的号码的颜色，但是......

HTML：

<ol>
  <li><a href="#">Main1</a></li>
  <li><a href="#">Main2</a></li>
  <li><a href="#">Main3
    <ol>
        <li><a href="#">Sub1</a></li>
        <li><a href="#">Sub2</a></li>
        <li><a href="#">Sub3</a></li>
    </ol>
  </a></li>
</ol>

CSS：

 a:hover {
    color: red;
 }

** Keammoort的解决方案可以保持颜色的变化。

Answer 4

如果你愿意使用它，jQuery是最简单的方法，因为父函数不能一起破解它。

请参阅此小提琴https://jsfiddle.net/z46dj34x/

你的a不应该在li之外，所以我也改变了

HTML

<ol>
    <li><a href="#">Main1</a></li>
    <li><a href="#">Main2</a></li>
    <li><a href="#">Main3</a>
        <ol class="sub-menu">
            <li><a href="#">Sub1</a></li>
            <li><a href="#">Sub2</a></li>
            <li><a href="#">Sub3</a></li>
        </ol>
  </li>
</ol>

的jQuery

$('ol li a').hover(         
    function () {
        $(this).css({"color":"red"});
        $(this).parent().css({"color":"red"});
    }, 

    function () {
        $(this).css({"color":"black"});
        $(this).parent().css({"color":"black"});
    }
);

CSS

li, li a {
    color:black;
}

当鼠标悬停时，如何使嵌套项的文本变为红色？

4 个答案: