4

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

4

6 回答 6

14

这是另一种方法，只需将悬停也应用到第二个 div，这样它就不会被隐藏：

$(function() {
  $('#div_2').hide();
  $('#div_1, #div_2').hover(function() {
      $('#div_2').stop().fadeIn();
  }, function(){
      $('#div_2').stop().fadeOut();
  });
});
于 2010-03-08T23:31:46.543 回答
2

mouseleave 功能可能是您正在寻找的。

于 2010-11-24T23:25:36.513 回答
0

试试这段代码：

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

    jQuery('#div_2').mouseout(function(){
        jQuery('#div_2').fadeOut();
    });
});
于 2011-06-10T10:22:33.007 回答
0

最简单的方法是将两个<div>s 放在第三个容器中<div>，然后将悬停效果应用于容器<div>。

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

于 2010-03-08T20:30:13.850 回答
0

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

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

希望这可以帮助。

于 2010-03-08T20:36:56.713 回答
0

将 mouseover 处理程序添加到#div_1，并将 mouseout 处理程序添加到#div_2。这样，#div_2当你 mouseover 时显示#div_1，当你 mouseout 时它被隐藏#div_2（而不是你 mouseout of 时#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();
});
于 2010-03-08T20:42:46.880 回答