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的方法？

Thx Ahmet

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>放入第三个容器<div>中，然后将悬停效果应用于容器<div>。

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

Answer 4

尝试使用hover（）而不是mouseover（）和mouseout（）。

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

希望这有帮助。

Answer 5

将鼠标悬停处理程序添加到#div_1，将mouseout处理程序添加到#div_2。这样，当您鼠标悬停#div_2时会显示#div_1，并且当您鼠标移除#div_2时（而不是鼠标移除#div_1时）会隐藏jQuery('#div_2').hide(); jQuery('#div_1').mouseover(function() { jQuery('#div_2').fadeIn(); }); jQuery('#div_2').mouseout(function(){ jQuery('#div_2').fadeOut(); });。唯一真正的缺点是，为了隐藏第二个div，你必须先将它鼠标悬停。

这样的事情：

{{1}}

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();
    });
});

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

6 个答案: