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

<ul>初始页面加载后，我有一个用javascript填充的。我目前.bind与mouseover和一起使用mouseout。

该项目刚刚更新到jQuery 1.7，所以我可以选择使用.on，但是我似乎无法使用它hover。是否有可能使用.on与hover？

编辑：文档加载后，我绑定到的元素将用javascript加载。这就是为什么我在使用on而不仅仅是hover。

（如果需要与使用.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（）方法混淆，该方法接受一个或两个函数。

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

编辑

回答这个问题已经有一段时间了，似乎已经吸引了一些注意。上面的代码仍然有效，但是我确实想在原始答案中添加一些内容。

虽然我更喜欢使用mouseenterand mouseleave（帮助我理解代码中发生了什么），.on()但它与使用hover()

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

由于最初的问题确实询问了它们如何on()与with一起正确使用hover()，所以我认为我会更正的用法，on()因此当时没有必要添加hover()代码。

编辑2012年12月11日

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

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

上面的代码.on()将受不了。相反，您应该稍微修改代码，如下所示：

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

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

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

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

这会将功能绑定到选择器，以便在文档准备好后使用该选择器创建的对象仍可以调用它。

我不确定其余的Javascript是什么样的，所以我将无法判断是否有任何干扰。但.hover()与配合使用时效果很好.on()。

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

如果您希望能够利用其事件，请使用事件返回的对象：

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

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

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

$（selector）.hover（inFunction，outFunction）;

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

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

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

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

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

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

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

尽管这阻止了我的动画的多个实例被调用，但最终我还是决定使用鼠标悬停/ mouseleave来确定何时将父级的孩子悬停在上面。

您可以使用.on()与hover通过执行附加注释部分所说的话：

尽管强烈建议不要使用新代码，但是您可能会看到伪事件名称“ 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"); }

});

编辑（对jQuery 1.8+用户的注释）：

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

$("#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');

您可以提供由空格分隔的一种或多种事件类型。

所以hover等于mouseenter mouseleave。

这是我的建议：

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

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

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

然后在另一种情况下，您可以轻松使用它：

 if ($(this).data('hover')){
      //...
 }

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

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上找到