創建絕對位置相對於某個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

回答

相關問題