是否可以使用jQuery .on和hover?

(如果你需要对JavaScript填充的元素使用.on()，请查看这个答案的最后一个编辑)

对于没有使用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()，但是:

虽然强烈不推荐用于新代码，但您可能会看到 pseudo-event-name“hover"用作字符串的缩写 “mouseenter mouseleave"。它为这些附加了一个事件处理程序 两个事件，处理程序必须检查事件。要确定的类型 事件是mouseenter还是mouseleave。不要混淆 “hover"使用.hover()方法的伪事件名称，该方法接受一个 或者两个函数

此外，使用它没有性能优势，而且它比仅使用mouseenter或mouseleave更笨重。我提供的答案需要更少的代码，并且是实现这类功能的正确方法。

编辑

这个问题已经有一段时间没有得到回答了，它似乎已经获得了一些吸引力。上面的代码仍然有效，但我确实想在原来的答案中添加一些东西。

虽然我更喜欢使用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填充问题中的div， .on()应该如何工作。例如，假设你使用jQuery的.load()事件填充div，如下所示:

(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填充的元素。只需将参数更改为适当的选择器。

我不确定你的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/ < a href = " http://jsfiddle.net/hmUPP/2/ " > < / >

你可以使用< >强.on() < / >强和hover，就像附加注释部分说的那样:

虽然强烈不推荐用于新代码，但您可能会看到 伪事件名称“hover”用作字符串的简写 “mouseenter mouseleave”。它为这些附加了一个事件处理程序 两个事件，处理程序必须检查事件。要确定的类型 事件是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”的简写。它连着一个 这两个事件的事件处理程序，处理程序必须检查 事件。类型以确定事件是mouseenter还是mouseleave。 不要将"hover"伪事件名称与.hover()方法混淆，

当把鼠标移到/移出在文档按照问题请求加载后创建的对象时，这些解决方案都不适合我。我知道这个问题很老了，但对于那些还在寻找的人，我有一个解决方案:

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

这将把函数绑定到选择器上，这样在文档准备好之后创建的带有该选择器的对象仍然能够调用它。

刚从网上浏览过来，觉得我能帮点忙。我注意到@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
});

虽然这阻止了我的动画被调用的多个实例，但我最终还是使用了mouseover/mouseleave，因为我需要确定什么时候父对象的子对象被悬停。

可以提供一个或多个事件类型，用空格分隔。

所以hover等于mouseenter mouseleave。

我的建议是:

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

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

如果你需要它在其他事件中作为条件，我是这样解决的:

$('.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中找到

jQuery悬停函数提供了鼠标悬停和鼠标退出的功能。

$(选择).hover (inFunction outFunction);

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

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