创建绝对位置相对于某个div的div

我：

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

来源

2012-07-23 Darius

我试图让HTML正确，然后尝试获取JavaScript排序。 – 2012-07-23 00:43:51

这听起来像是你想创建一个水平导航栏。你是否尝试过使用列表而不是div来做它？

我创建了一个的jsfiddle证明：http://jsfiddle.net/g8WUA/

没有JavaScript的要求和跨浏览器（和移动）兼容。

最佳，

辛西娅

来源

2012-07-23 00:49:42 Cynthia

+1这是一些鼓舞人心的CSS。谢谢！ – 2012-07-24 01:48:29

在这里，我已经做了使用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'; 
    } 
}

来源

2012-07-23 08:29:32 gaurang171

创建绝对位置相对于某个div的div

回答

相关问题