Question

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

请提供任何线索。实例位于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>

Answer 1

将鼠标悬停在mouseenter和mouseleave中，无论如何，这就是悬停的缩写。

$("#first").on("mouseenter", "a", function(event) {
   $(this).parent().css("background-color", "yellow");
}).on("mouseleave", "a", function(event) {
   $(this).parent().css("background-color", "");
});

Answer 2

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

DEMO

$("#first").on({
    mouseenter: function() {
        $(this).parent().css("background-color", "yellow");
    },
    mouseleave: function() {
        $(this).parent().css("background-color", "");
    }
}, 'a');

Answer 3

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

只是你不能传递2个功能。您需要测试事件类型。

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

DEMO： http://jsfiddle.net/HxuuS/

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

用on（）删除悬停

3 个答案: