鼠標(biāo)懸浮顯示隱藏的div
當(dāng)前位置：點(diǎn)晴教程→知識管理交流
→『 技術(shù)文檔交流 』
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .ap{ width: 75px; height: 35px; border: 1px solid #000000; text-align: center; line-height: 35px; } .bp{ display: none; background-color: #f9f9f9; min-width: 70px;/*最小寬度*/ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*向div添加陰影*/ padding: 14px 16px; color: #000000; } .ap:hover{ background-color: #EEEEEE; } .ap:hover .bp{ display: block; } .pick{ width: auto; height: 35px; } </style> </head> <body>
<div class="ap"> 來這里 <div class="bp"> <div class="pick" >驚喜1</div> <div class="pick" >驚喜2</div> <div class="pick" >驚喜3</div> </div> </div> </body> </html> 上面是實(shí)現(xiàn)代碼，可以直接運(yùn)行。 實(shí)現(xiàn)過程： 1、先定義兩個(gè)div，將其中一個(gè)用"display：none"設(shè)為默認(rèn)隱藏。 注意：隱藏的div要定義在不隱藏的div里面！ 2、在CSS中用“hover”實(shí)現(xiàn)鼠標(biāo)懸浮后顯示隱藏的div. .ap:hover .bp{ display: block; } 該文章在 2023/10/25 15:47:30 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
