3

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

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

关于 jSFiddle：http: //jsfiddle.net/4z2zq/4/

这将使用两个 DIV ID：

  1. div1
  2. div2

但是，当#div2我悬停时，我无法点击这些链接！当我尝试点击这些链接时，这个 div 会消失。#div2悬停时要保留的任何想法#div2。

4

6 回答 6

2

类似的东西

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

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

于 2013-08-14T20:19:51.617 回答
1

对我来说，最好的方法是更改​​ 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>
于 2013-08-14T20:22:31.437 回答
1

你只需要嵌套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。

这是你的小提琴的工作叉

于 2013-08-14T20:17:49.990 回答
1

您需要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>

这是小提琴

于 2013-08-14T20:18:06.483 回答
0

我建议您为此使用 CSS 伪函数，并将被操作的元素放在父级 (#div1) 中，例如：

#div2{
  display:none;
}

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

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

于 2014-01-29T10:33:49.893 回答
0

放入包装器div1并将事件绑定到包装器。div2divhover

于 2013-08-14T20:16:31.873 回答