jQuery onmouseover + onmouseout / 悬停在两个不同的 div 上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2404478/
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 onmouseover + onmouseout / hover on two different divs
提问by ahmet2106
I've got a Problem:
我有一个问题：
Here a part of my HTML:
这是我的 HTML 的一部分：
<div id="div_1">
Here Hover
</div>
<div id="div_2">
Here content to show
</div>
And here a part of my jQuery Script:
这是我的 jQuery 脚本的一部分：
jQuery('#div_2').hide();
jQuery('#div_1').onmouseover(function() {
jQuery('#div_2').fadeIn();
}).onmouseout(function(){
jQuery('#div_2').fadeOut();
});
The Problem:
问题：
If i hover on the div_1, the div_2 is shown, if i hover out, the div_2 is hidden, but:
如果我悬停在 div_1 上，则显示 div_2，如果我悬停在 div_2 上，则隐藏 div_2，但是：
If i hover first on div_1 and then go over div_2, the div_2 is hidden fast.
如果我先将鼠标悬停在 div_1 上，然后越过 div_2，则 div_2 会快速隐藏。
I've tried this with jQuery.addClass(); after mouseout in div_1, but nothing is changing.
我已经用 jQuery.addClass(); 试过了。在 div_1 中 mouseout 之后，但没有任何变化。
I dont want do make the second div in the first div... Is there another way with jQuery?
我不想在第一个 div 中创建第二个 div ......还有另一种方式使用 jQuery 吗？
Thx Ahmet
谢谢艾哈迈德
回答by Nick Craver
Here's another approach, just apply the hover to the second div as well so it stops itself being hidden:
这是另一种方法，只需将悬停也应用于第二个 div，这样它就会停止隐藏自己：
$(function() {
$('#div_2').hide();
$('#div_1, #div_2').hover(function() {
$('#div_2').stop().fadeIn();
}, function(){
$('#div_2').stop().fadeOut();
});
});
回答by Roch
The mouseleave function might be what you are looking for.
mouseleave 函数可能正是您要找的。
回答by Jafar Khan
Try This code:
试试这个代码：
$(function() {
jQuery('#div_2').hide();
jQuery('#div_1').mouseover(function() {
jQuery('#div_2').fadeIn();
});
jQuery('#div_2').mouseout(function(){
jQuery('#div_2').fadeOut();
});
});
回答by SLaks
回答by Raja
Try using hover() instead of mouseover() and mouseout().
尝试使用 hover() 而不是 mouseover() 和 mouseout()。
Check out this documentation page : http://api.jquery.com/hover/
查看此文档页面：http: //api.jquery.com/hover/
Hope this helps.
希望这可以帮助。
回答by Aaron
Add the mouseover handler to #div_1, and the mouseout handler to #div_2. This way, #div_2is shown when you mouseover #div_1, and it is hidden when you mouseout of #div_2(instead of as soon as you mouseout of #div_1). The only real drawback to this is that in order to hide the second div, you must mouseover it first.
将 mouseover 处理程序添加到#div_1，并将 mouseout 处理程序添加到#div_2。这样，#div_2当您鼠标悬停时显示，当您离开鼠标时#div_1隐藏#div_2（而不是当您离开鼠标时#div_1）。唯一真正的缺点是，为了隐藏第二个 div，您必须先将鼠标悬停在它上面。
Something like this:
像这样的东西：
jQuery('#div_2').hide();
jQuery('#div_1').mouseover(function() {
jQuery('#div_2').fadeIn();
});
jQuery('#div_2').mouseout(function(){
jQuery('#div_2').fadeOut();
});
