0

我想要一个悬停和删除悬停事件。具有此事件的节点是动态添加的，因此我希望使用 on()。添加悬停事件时，效果很好（下面的#second 列表）。出于某种原因，当我添加关闭悬停事件时，甚至添加悬停事件都不起作用（下面的#first 列表）。

请提供任何线索。一个活生生的例子位于http://jsfiddle.net/NV7hR/

谢谢

$(document).ready(function() {
  $("#first").on("hover", "a", function(event) {
    $(this).parent().css("background-color", "yellow");
  }, function(event) {
    $(this).parent().css("background-color", "");
  });
  $("#second").on("hover", "a", function(event) {
    $(this).parent().css("background-color", "yellow");
  });
});

<body>
<ul id="first">
    <li><a href="#"/>Link</a></li>
    <li><a href="#"/>Link</a></li>
    <li><a href="#"/>Link</a></li>
</ul>
<ul id="second">
    <li><a href="#"/>Link</a></li>
    <li><a href="#"/>Link</a></li>
    <li><a href="#"/>Link</a></li>
</ul>
</body>
4

3 回答 3

4

将悬停拆分为 mouseenter 和 mouseleave，这就是悬停的简写。

$("#first").on("mouseenter", "a", function(event) {
   $(this).parent().css("background-color", "yellow");
}).on("mouseleave", "a", function(event) {
   $(this).parent().css("background-color", "");
});
于 2012-04-09T19:38:03.317 回答
3

.hover因此，这不是一个事件。hover是mouseenter和mouseleave事件的简写。尝试使用如下，

演示

$("#first").on({
    mouseenter: function() {
        $(this).parent().css("background-color", "yellow");
    },
    mouseleave: function() {
        $(this).parent().css("background-color", "");
    }
}, 'a');
于 2012-04-09T19:41:09.400 回答
2

尽管其他人都声称，您确实可以使用'hover'with .on()。

只是你不能通过 2 个函数。您需要测试事件类型。

$("#first").on("hover", "a", function(e) {
    $(this).css("background-color", e.type === 'mouseenter' ? "yellow" : '');
});

演示：http: //jsfiddle.net/HxuuS/

仅供参考，传递 2 个函数导致它根本不起作用的原因是第一个处理程序被解释为 的可选data参数on，因此只有第二个处理程序（那个mouseleave）被绑定。

于 2012-04-09T19:47:49.390 回答