创建一个具有绝对位置的div,相对于某个div

时间:2012-07-23 00:41:48

标签: javascript jquery css

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

我有:

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

2 个答案:

答案 0 :(得分:3)

这听起来像是在尝试创建水平导航栏。您是否尝试过使用列表而不是div?

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

不需要javascript并且跨浏览器(和移动设备)兼容。

最佳,

辛西娅

答案 1 :(得分:0)

这里我已经使用java脚本完成了关于垃圾箱的完整解决方案。

DEMO: 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';
    }
}