jQuery onmouseover + onmouseout / 悬停在两个不同的 div 上
我有一个问题：
这是我的 HTML 的一部分：
<div id="div_1">
Here Hover
</div>
<div id="div_2">
Here content to show
</div>
这里是我的 jQuery 脚本的一部分：
jQuery('#div_2').hide();
jQuery('#div_1').onmouseover(function() {
jQuery('#div_2').fadeIn();
}).onmouseout(function(){
jQuery('#div_2').fadeOut();
});
问题：
如果我将鼠标悬停在 div_1 上，则显示 div_2，如果我将鼠标悬停在外面，则 div_2 被隐藏，但是：
如果我先将鼠标悬停在 div_1 上，然后再悬停在 div_2 上，则 div_2 会快速隐藏。
我已经用 jQuery.addClass(); 尝试过这个在 div_1 中鼠标移出后，但没有任何变化。
我不想在第一个 div 中创建第二个 div...jQuery 还有其他方法吗？
谢谢艾哈迈德
I've got a Problem:
Here a part of my 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('#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:
If i hover first on div_1 and then go over div_2, the div_2 is hidden fast.
I've tried this with jQuery.addClass(); after mouseout in div_1, but nothing is changing.
I dont want do make the second div in the first div... Is there another way with jQuery?
Thx Ahmet
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
这是另一种方法，只需将鼠标悬停到第二个 div 上，这样它就不会被隐藏了：
Here's another approach, just apply the hover to the second div as well so it stops itself being hidden:
mouseleave 函数可能正是您正在寻找的。
The mouseleave function might be what you are looking for.
最简单的方法是将两个
放入第三个容器中，然后将悬停效果应用于容器< ;div>。顺便说一句，您应该使用
hover简写来添加处理程序。The simplest way to do this is to put both
<div>s inside a third container<div>, then apply the hover effect to the container<div>.By the way, you should use the
hovershorthand to add the handlers.尝试使用hover()而不是mouseover()和mouseout()。
查看此文档页面：http://api.jquery.com/hover/
希望这有帮助。
Try using hover() instead of mouseover() and mouseout().
Check out this documentation page : http://api.jquery.com/hover/
Hope this helps.
将鼠标悬停处理程序添加到
#div_1，将鼠标悬停处理程序添加到#div_2。这样，当您将鼠标悬停在#div_1上时，#div_2就会显示，而当您将鼠标移出#div_2时，它就会隐藏（而不是一旦您将鼠标移出#div_1）。唯一真正的缺点是，为了隐藏第二个 div，您必须先将鼠标悬停在它上面。像这样的事情：
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.Something like this:
试试这个代码：
Try This code: