<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮動</title> <style type="text/css"> *{ margin: 0; padding: 0; } .one{ text-decoration: none; color:red; font-size: 20px;
/*position: relative;*/ } .two{ width: 200px; height: 100px; background: blue; display: none;
/*position: absolute;*/
} .one:hover + .two{ display: block; } </style> </head> <body> <div class="one">
你好
<div class="two">我一點也不好</div>
</div>
<div style="width: 100px; height: 100px; background-color: yellow">我是下面的元素</div> </body> </html
實現鼠標經過 你好 顯示 我一點也不好 的效果方法：
首先使用display：none 隱藏要顯示的菜單欄元素，當鼠標經過一個元素時將它的display改成block。
鼠標經過one元素時怎么選擇two元素的問題：
1.當兩個p元素為包含關系時，選擇器應該這樣寫.one：hover .two
<p class="one">
你好
<p class="two">我一點也不好</p>
</p>
2.當兩個p元素為並列關系時，選擇器應該這樣寫.one：hover + .two
<p class="one">你好</p>
<p class="two">我一點也不好</p>
經過驗證,1的寫法不能顯示效果，因為瀏覽器默認把one的開始標簽和two的結束標簽 認為是一個...嗯...整體標簽。此時改變其中一個p標簽為div，或者兩個p標簽都改成div就有效果。為什么div可以，p就不行？
好像塊狀元素可包含內聯元素或某些塊元素,但內聯元素不可包含塊元素,只能包含內聯元素。
<p class="one">
你好
<p class="two">我一點也不好</p>
</p>
這個時候在下面再加入一個元素
<body>
<p class="one">
你好
</p>
<p class="two">我一點也不好</p>
<div style="width: 100px; height: 100px; background-color: yellow">我是下面的元素</div>
</body>
鼠標未移到one時效果：
鼠標移上去之后效果，下面的元素會被頂開：
解決辦法：因為.two 顯示時是存在於文檔流中的，給.one設置position:relative，.two設置position:absolute，使下拉菜單脫離了文檔流來解決。
加了position:absolute 已經實現效果 為什么還要給.one設置position:relative？？？？十二點了，我不想再想了！明天再說！