Question

我正在使用此jquery代码在悬停时显示div：

$(function() {
  $('#div1').hover(function() { 
    $('#div2').fadeIn(); 
  }, function() { 
    $('#div2').fadeOut(); 
  });
});

on jSFiddle：http://jsfiddle.net/4z2zq/4/

这将使用两个DIV ID：

div1
div2

但是当#div2徘徊时，我无法点击这些链接！当我尝试点击这些链接时，这个div就消失了。任何想法在#div2本身悬停时保持#div2。

Answer 1

像这样的东西

$(function() {
    $('#div1').hover(function() { 
        $('#div2').fadeIn(); 
    } );
    $('#div2').mouseleave(function() {                  
        $('#div2').fadeOut(); 
    });
});

http://jsfiddle.net/4z2zq/8/

Answer 2

您只需要在div2内嵌套div1。

<div id="div1">hover over me
    <div id="div2">
        <ul>
            <li><a href='Google.com'>Google</a></li>
            <li><a href='Google.com'>Yahoo</a></li>
            <li><a href='Google.com'>AOl</a></li>
        </ul>
    </div>
</div>

上述方法可行，我所做的就是将</div>从第1行移到最后。这使div2成为div1的孩子。

Here is a working fork of your fiddle

Answer 3

您需要将div2包裹在div1内。

<div id="div1">hover over me
    <div id="div2">
        <ul>
            <li><a href='Google.com'>Google</a>
            </li>
            <li><a href='Google.com'>Yahoo</a>
            </li>
            <li><a href='Google.com'>AOl</a>
            </li>
        </ul>
    </div>
</div>

以下是fiddle

Answer 4

对我来说，最好的方法是更改HTML代码：

<div id="div1">hover over me
    <ul id="div2">
        <li><a href='Google.com'>Google</a></li>
        <li><a href='Google.com'>Yahoo</a></li>
        <li><a href='Google.com'>AOl</a></li>
    </ul>
</div>

Answer 5

将div1和div2放在包装器div中，并将hover事件绑定到包装器。

Answer 6

我建议您使用CSS伪函数，并将操纵元素放在父级（＃div1）中，例如：

#div2{
  display:none;
}

#div1:hover #div2 {
  display: block;
}

除非使用限制跨浏览器功能的CSS 3过渡，否则你不会有奇特的过渡。

用jquery悬停的div消失了

6 个答案: