使用偽類hover顯示隱藏
阿新 • • 發佈：2019-01-23
當滑鼠移入某標籤時，div顯示，移出時，div隱藏，並且滑鼠在div上時，也是顯示的 記錄，直接上程式碼
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .dropdown { position: relative; display: inline-block; border:1px solid red; height: 30px; line-height: 30px; } .dropdownMenu { position: absolute; left: 0; top: 25px; width: 160px; background: #fff; border: 2px solid #ccc; padding: 8px 35px 25px 0; z-index: 999; border-top: 0; border-radius: 0; box-sizing: content-box; display: none; } .dropdown:hover{ background-color: yellow; } .dropdownMenu p { display: block; } .dropdownMenu p:hover{ background-color: red; } .dropdown:hover .dropdownMenu{ display: block; } </style> </head> <body> <span class="dropdown"> <a href="javascript:void(0);">精選版塊</a> <div style="background: #eaebec;" class="dropdownMenu"> <p>移動開發11</p> <p>雲端計算22</p> <p>分散式計算33</p> <p>Java技術44</p> </div> </span> <span class="dropdown"> <a href="javascript:void(0);">一般版塊</a> <div style="background: #eaebec;" class="dropdownMenu"> <p>移動開發</p> <p>雲端計算</p> <p>分散式計算</p> <p>Java技術</p> </div> </span> </body> </html>
效果：當滑鼠放在一般模組時，灰色div模組顯示，移入到灰色div模組選項上，選項變紅色，移出時，灰色div隱藏；如下圖：
