是否可以使用jQuery .on和悬停？

#1 楼

（如果需要将.on()与使用JavaScript填充的元素一起使用，请查看此答案的最后编辑内容）。

将其用于未使用JavaScript填充的元素：

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover()有它自己的处理程序：http://api.jquery.com/hover/

如果您想做很多事情，可以将它们链接在.on()处理程序中，如下所示：

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

根据下面提供的答案，您可以将hover与.on()结合使用，但是：


尽管强烈建议不要使用新代码，您可能会看到
伪事件名称“ hover”用作字符串
“ mouseenter mouseleave”的简写。它为这两个事件附加一个事件处理程序，该处理程序必须检查event.type以确定该事件是mouseenter还是mouseleave。请勿将
“ hover”伪事件名称与.hover（）方法混淆，该方法接受一个
或两个函数。


使用它没有性能优势，并且比仅使用mouseenter或mouseleave更庞大。我提供的答案需要较少的代码，并且是实现类似目标的正确方法。

EDIT

已经有一段时间了，因为这个问题得到了答案，而且似乎已经获得了一些牵引力。上面的代码仍然存在，但我确实想在原始答案中添加一些内容。

虽然我更喜欢将mouseenter和mouseleave（帮助我了解代码中的情况）与.on()结合使用，但这只是与使用hover()编写以下内容相同

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

由于原始问题确实询问他们如何正确地将on()与hover()结合使用，我认为我会更正on()的用法，但找不到当时添加hover()代码的方法。

2012年12月11日编辑

下面提供的一些新答案详细说明了如果使用JavaScript填充有问题的.on()，div应该如何工作。例如，假设您使用jQuery的div事件填充了.load()，如下所示：相反，您应该稍微修改代码，如下所示：

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

此代码将在发生.on()事件后，对使用JavaScript填充的元素起作用。只需将参数更改为适当的选择器即可。

#2 楼

当鼠标移入/移出作为问题请求加载的文档后创建的对象时，这些解决方案都无法为我工作。我知道这个问题很旧，但是对于那些仍在寻找的人，我有一个解决方案：文档准备就绪后仍然可以调用它。

#3 楼

我不确定其余的Javascript是什么样的，所以我将无法判断是否有任何干扰。但是.hover()可以作为事件与.on()一起很好地使用。 >

$("#foo").on("hover", function() {
  // disco
});

http://jsfiddle.net/hmUPP/2/

#4 楼

jQuery悬停功能提供了mouseover和mouseout功能。

$（选择器）.hover（inFunction，outFunction）;

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

来源：http://www.w3schools.com/jquery /event_hover.asp

#5 楼

刚从网上冲浪，觉得我可以有所作为。我注意到使用@calethebrewer发布的上述代码可能导致选择器上的多次调用和意外行为，例如：-

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

此小提琴http：// jsfiddle .net / TWskH / 12 /我的观点。当对诸如插件中的元素进行动画处理时，我发现这些多个触发器会导致意外的行为，这可能导致调用动画或代码的次数超过了必要。

我的建议是简单地用mouseenter / mouseleave：-

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

尽管这阻止了我动画的多个实例被调用，但最终我还是根据需要决定使用鼠标悬停/ mouseleave来确定父母的孩子被悬停。

#6 楼

您可以通过执行“其他说明”部分的说明将.on()与hover结合使用：


尽管强烈建议不要使用新代码，但您可能会看到
伪事件名称“ “用作字符串的缩写
” mouseenter mouseleave“。它为这两个事件附加一个事件处理程序，并且该处理程序必须检查event.type以确定该事件是mouseenter还是mouseleave。不要将
“ hover”伪事件名称与.hover（）方法混淆，该方法接受一个或两个函数。


请执行以下操作：

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

EDIT（针对jQuery 1.8+用户的注释）：


jQuery 1.8（在1.9中删除）：名称“ hover”用作字符串“ mouseenter mouseleave”的简写形式。它为这两个事件附加一个
事件处理程序，并且该处理程序必须检查
event.type以确定该事件是mouseenter还是mouseleave。
不要混淆“ hover”伪代码，事件名称带有.hover（）方法，
接受一个或两个函数。

#7 楼

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({'color':'red'});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({'color':'blue'});

}},'tr');

#8 楼

您可以提供一个或多个用空格隔开的事件类型。

hover等于mouseenter mouseleave。

这是我的建议：

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

#9 楼

如果您需要它作为其他事件的条件，我可以通过以下方式解决它： />

$('.classname').hover(
     function(){$(this).data('hover',true);},
     function(){$(this).data('hover',false);}
);

（我看到有人用is(':hover')来解决这个问题。但这还不是有效的jQuery选择器，并且不能在所有兼容的浏览器中使用）

#10 楼

jQuery插件hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html比这里列出的简单方法要走得多。尽管它们确实可以工作，但它们不一定会按照用户的期望进行操作。

使用hoverIntent的最重要原因是超时功能。它允许您执行诸如阻止菜单关闭之类的操作，因为用户在单击所需的项目之前将鼠标稍微向左或向右拖动。它还提供了在弹幕中不激活悬停事件并等待焦点悬停的功能。

示例：

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

对此的进一步解释可以在https://stackoverflow.com/a/1089381/37055
上找到