1

我尝试了不同的方法，但无济于事。

我有：

<div>
    <a id="" href="">Link 1</a> <a id="2" href="">Link 2</a> <a id="linkid" href="">Link 3</a>
</div>
<div id="dropdown_div" style="display:none;">
   Linkindiv
   Link2indiv
</div>

现在，当用户将鼠标悬停在链接 3 上时，我希望 div 显示在它的正下方，其绝对位置的 z-index 高于页面上的其他内容。

像

Link1 link 2 link3
         [ linkindiv  ]
         [ link2indiv ]

这是我一直用来显示和隐藏的 jquery 代码。

            var hide = false;
            jQuery("#linkid").hover(function(){
                if (hide) clearTimeout(hide);
                jQuery("#dropdown_div").fadeIn();
            }, function() {
                hide = setTimeout(function() {jQuery("#dropdown_div").fadeOut("slow");}, 250);
            });
            jQuery("#dropdown_div").hover(function(){
                if (hide) clearTimeout(hide);
            }, function() {
                hide = setTimeout(function() {jQuery("#dropdown_div").fadeOut("slow");}, 250);
            });
4

2 回答 2

3

这听起来像您正在尝试创建一个水平导航栏。您是否尝试过使用列表而不是 div 来做到这一点？

我创建了一个 JsFiddle 来演示：http: //jsfiddle.net/g8WUA/

不需要 javascript 并且跨浏览器（和移动）兼容。

最好的，

辛西娅

于 2012-07-23T00:49:42.157 回答
0

在这里，我已经使用 java 脚本针对上述问题完成了 bin 的完整解决方案。

演示： http ://codebins.com/bin/4ldqp9z

HTML：

<div id="menu">
  <a id="1" href="#1">
    Link 1
  </a>

  <a id="2" href="#2">
    Link 2
  </a>

  <a id="linkid" href="#3">
    Link 3
  </a>
</div>
<div id="dropdown_div">
  <div>
    <a href="#">
      Linkindiv
    </a>
  </div>
  <div>
    <a href="#">
      Link2indiv
    </a>
  </div>
</div>

CSS：

#menu{
  width:750px;
  border:1px solid #546588;
  padding"5px";
  background:#88f8fd;
}
#menu a{
  display:inline-block;
  padding:5px;
  text-decoration:none;
  width:70px;
  color:#1122ff;
}
#menu a:hover{
  background:#55a899;
  text-decoration:underline;
}
#dropdown_div{
  display:none;
  position:absolute;
  border:1px solid #546588;
  background:#88f8fd;
  width:70px;
}
#dropdown_div a{

  text-decoration:none;
  color:#1122ff;
}
#dropdown_div div:hover{

  background:#55a899;
}
#dropdown_div div:hover a{

  text-decoration:underline;
}

Javascript：

var MenuDiv = document.getElementById('menu');
var menulinks = MenuDiv.getElementsByTagName('a');
var dropdown_div = document.getElementById('dropdown_div');
var i = 0;
//bind mouseover and mouseout event with each link
for (i = 0; i < menulinks.length; i++) {
    menulinks[i].onmouseover = function() {
        var mTop = this.offsetTop + MenuDiv.offsetHeight + 1;
        var mLeft = this.offsetLeft;
        dropdown_div.style.top = mTop;
        dropdown_div.style.left = mLeft;
        dropdown_div.style.display = 'block';

    }
    menulinks[i].onmouseout = function() {
        dropdown_div.style.display = 'none';
    }
}
于 2012-07-23T08:29:32.377 回答