Javascript 悬停时的 Jquery 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12260235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery on hover not working
提问by Param Veer
I'm changing my codes to be compatible with jQuery 1.8 and I'm stuck with this hoverwhich doesn't work. When I used then same thing with a clickit worked. Here is my code, can anyone tell me where I'm going wrong?
我正在更改我的代码以与 jQuery 1.8 兼容，但我遇到了这个hover不起作用的问题。当我使用相同的东西时，click它起作用了。这是我的代码，谁能告诉我哪里出错了？
$(document).on('hover', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function () {
$(this).find('.dropfcnt').hide('blind', function () {
$('.actionfcnt').hide();
});
});
回答by nbrooks
Deprecated as of jQuery 1.8: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confusethe "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
从 jQuery 1.8 开始弃用：名称“hover”用作字符串“mouseenter mouseleave”的简写。它为这两个事件附加了一个事件处理程序，处理程序必须检查 event.type 以确定事件是 mouseenter 还是 mouseleave。不要将“悬停”伪事件名称与接受一两个函数的 .hover() 方法混淆。
Source: http://api.jquery.com/on/#additional-notes
来源：http: //api.jquery.com/on/#additional-notes
That pretty much says it all, you cant use "hover" for that:
这几乎说明了一切，您不能为此使用“悬停”：
$(document).on('mouseenter','.top-level', function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level', function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});
回答by Dziad Borowy
there is no "hover" event. there is .hover() function that takes 2 callbacks (as in your example).
没有“悬停”事件。有 .hover() 函数需要 2 个回调（如您的示例）。
回答by Danil Speransky
.onfunction has only 3 parameters : http://api.jquery.com/on/
.on函数只有 3 个参数：http: //api.jquery.com/on/
If you don't need your handlers be bound to dynamically added elements as well, then you may use the good old hoverfunction with 2 event handlers.
如果您不需要将处理程序绑定到动态添加的元素，那么您可以使用hover带有 2 个事件处理程序的旧函数。
$('.top-level').hover(function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});?
By the way, $(selector).hover(handlerIn, handlerOut)is shorthand for $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.
顺便说一下，$(selector).hover(handlerIn, handlerOut)是 的简写$(selector).mouseenter(handlerIn).mouseleave(handlerOut);。
If you need to, then use onfor mouseenterand mouseleaveevents:
如果需要，请使用onformouseenter和mouseleaveevents：
$(document).on('mouseenter', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});?
回答by Sudhir Bastakoti
Try:
尝试：
$(".top-level").on({
mouseenter: function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
},
mouseleave: function (event) {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
OR
或者
$(".top_level").on("hover", function(event) {
if(event.type == "mouseenter") {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}
else if (event.type == "mouseleave") {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
回答by Florian Bauer
Try
尝试
$('.top-level').hover(function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}, function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});
