javascript - 删除 jQuery 悬停效果

Question

当鼠标悬停在链接上时，假设发生 X 效果。 鼠标移开后如何恢复原来的状态？

例如，我尝试使用 JavaScript 修改链接行为。鼠标悬停时链接会发生变化，但如何恢复更改？

HTML 代码:

<ul id="nav">
    <li id="a1"><a href="#">original link 1</a></li>
    <li id="a2"><a href="#">hover link 1</a></li>
    <li id="b1"><a href="#">original link 1</a></li>
    <li id="b2"><a href="#">hover link 1</a></li>
    <li id="c1"><a href="#">original link 1</a></li>
    <li id="c2"><a href="#">hover link 1</a></li>
</ul>

Javascript代码:

$("#nav a li").hover(function () {
     $('#' +this.id.charAt(0)+"1").hide();
});

Answer 1

更正 HTML 标记后，改用 CSS。这将为您提供更好的性能、更少的代码，并且更“合适”，因为视觉细节应该留给 CSS。

#nav li:hover {
  display: none;
}

更新:在尝试进一步了解您的标记后，我更好地了解您想要做什么。你好像想隐藏下一个<li>元素。在这种情况下，请使用 CSS 邻接选择器:

#nav li:hover + li {
  display: none;
}