懸停在導航鏈接顯示一個單獨的DIV

我想要做的是有一個在我的導航欄叫做「天氣」鏈接，當你在它懸停或點擊它，我想讓它顯示與天氣下拉網絡小部件裏面。懸停在導航鏈接顯示一個單獨的DIV

這是我到目前爲止。懸停部分工作，但它將「天氣」鏈接推到我的導航欄的底部。我如何才能恢復原來的位置？

<div id="navbar"> 
     <ul> 
      <li><a href="#">Home <img src="home.png" /></a></li> 
      <li><a href="#">Forum <img src="forum.png" /></a></li> 
      <li><a href="#">Pictures <img src="camera.png" /></a></li> 
      <li><a href="#">Videos <img src="videos.png" /></a></li> 
      <li><a href="#">Technology <img src="technology.png" /></a></li> 
      <li><a href="#">Politics <img src="politics.png" /></a></li> 
      <li><a href="#">World Issues <img src="issues.png" /></a></li> 
      <li><a href="#">Contact <img src="contact.png" /></a> 
      <li><a href="#"><div id="div1">Weather <img src="weather.png" /></a><div id="div2">testing</div></div></li> 
     </ul> 
    </div>

而CSS：

#div1 { 
    cursor:pointer; 
} 
#div2 { 
    display:none; 
    height: 20px; 
    width: 100px; 
    background-color: white; 
    position: absolute; 
    top: 100px; 
    left: 100px; 
    z-index: 20; 
} 
#div1:hover #div2 { 
    display:block; 
}

的是什麼樣子Here is an image。

來源

2013-12-16 user3107811

我在想，weather.png的大小和div2的大小之間是否存在差距 - 也許試試div2沒有高度和寬度來查看會發生什麼。或者在 TimSPQR

中給出.png高度和寬度您應該使用嵌套的li標籤而不是顯示和隱藏第二個div。 – APAD1

您的導航欄中可能沒有足夠的空間容納所有元素，並且會將最後一個元素推向下一行。嘗試備份您的保證金/填充，看看會發生什麼。 –

首先，你要確定你的HTML。與此更換你的div線（我重新格式化我的回答的可讀性的原因）：

<li id="div1"> 
    <a href="#">Weather <img src="weather.png" /></a> 
    <div id="div2">testing</div> 
</li>

，然後試試這個CSS代碼：

#div1 { 
    position: relative; 
} 
#div1 > a { 
    cursor:pointer; 
} 
#div2 { 
    position: absolute; 
    top: 100%; 
    left: 0; 

    display:none; 
    height: 20px; 
    width: 100px; 
    background-color: white; 
    z-index: 20; 
} 
#div1:hover #div2 { 
    display:block; 
}

它的工作原理，因爲當你的地方絕對定位元素位於相對定位元素內，絕對元素將根據相對元素的邊界定位自己。因此，top: 100%將放置#div2的頂部在#div1底部。

來源

2013-12-16 15:30:03

啊哈！奇蹟般有效！非常感謝你！！ – user3107811

很高興爲您解決:-) –

你必須使用Javascript功能來檢測點擊鏈接天氣（添加一個ID爲OU類），並在彈出的點擊秀（google了jQuery插件）天氣小工具。

來源

2013-12-16 15:22:10

這似乎並不準確。你能鏈接到你參考的來源嗎？ – Nick

你的HTML出了故障。雖然它會渲染，但它不會像您期望的那樣渲染。嘗試一下本作的天氣鏈接：

<li><div id="div1"><a href="#">Weather <img src="weather.png" /></a><div id="div2">testing</div></div></li>

對於onclick事件，您將需要使用JavaScript或jQuery的：

$("#div1").on("click", function() { 
    $("#div2").css("display", "block"); 
}

你也可以把onclick事件的標籤，如果你想。

來源

2013-12-16 15:32:07 Bic

懸停在導航鏈接顯示一個單獨的DIV

回答

相關問題