jQuery onmouseover + onmouseout / 悬停在两个不同的 div 上

Question

我有一个问题：

这是我的 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 还有其他方法吗？

谢谢艾哈迈德

Answer 1

这是另一种方法，只需将鼠标悬停到第二个 div 上，这样它就不会被隐藏了：

$(function() {
  $('#div_2').hide();
  $('#div_1, #div_2').hover(function() {
      $('#div_2').stop().fadeIn();
  }, function(){
      $('#div_2').stop().fadeOut();
  });
});

Answer 2

mouseleave 函数可能正是您正在寻找的。

Answer 3

最简单的方法是将两个

放入第三个容器

中，然后将悬停效果应用于容器 < ;div>。

顺便说一句，您应该使用 hover 简写来添加处理程序。

Answer 4

尝试使用hover()而不是mouseover()和mouseout()。

查看此文档页面：http://api.jquery.com/hover/

希望这有帮助。

Answer 5

将鼠标悬停处理程序添加到 #div_1，将鼠标悬停处理程序添加到 #div_2。这样，当您将鼠标悬停在 #div_1 上时，#div_2 就会显示，而当您将鼠标移出 #div_2 时，它就会隐藏（而不是一旦您将鼠标移出#div_1）。唯一真正的缺点是，为了隐藏第二个 div，您必须先将鼠标悬停在它上面。

像这样的事情：

jQuery('#div_2').hide();
jQuery('#div_1').mouseover(function() {
    jQuery('#div_2').fadeIn();
});
jQuery('#div_2').mouseout(function(){
    jQuery('#div_2').fadeOut();
});

Answer 6

试试这个代码：

$(function() {
    jQuery('#div_2').hide();
    jQuery('#div_1').mouseover(function() {
        jQuery('#div_2').fadeIn();
    });

    jQuery('#div_2').mouseout(function(){
        jQuery('#div_2').fadeOut();
    });
});