0

当鼠标悬停在链接上时，假设效果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();
});
4

4 回答 4

2

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

#nav li:hover {
  display: none;
}

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

#nav li:hover + li {
  display: none;
}
于 2013-04-09T19:17:50.980 回答
1

尝试

 $("#nav a li").on('hover', function () {
   //mousehover
 } , function(){
   //mouseout
 } );
于 2013-04-09T19:18:00.940 回答
0

使用 mouseover 和 mouseout jQuery insted of hover

于 2013-04-09T19:18:35.240 回答
0

你写的代码相当于$(selector).on("mouseenter mouseleave", handlerInOut);

使用有效的标记...

<ul id="nav">
    <li><a href="#">hover link 1</a></li>
    <li><a href="#">hover link 2</a></li>
</ul>

jQuery

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

来自 jQuery API 文档：http ://api.jquery.com/hover/

调用 $(selector).hover(handlerIn, handlerOut) 是以下的简写： $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

于 2013-04-09T19:18:35.220 回答