CSS可以很方便地實現(xiàn)鼠標滑過時顯示菜單的效果,接下來我們來通過一個簡單的例子來實現(xiàn)它。
HTML代碼如下: <div class="menu"> <p>菜單1</p> <p>菜單2</p> <p>菜單3</p> </div> CSS代碼如下: .menu{ display: none; /*默認隱藏菜單*/ } .menu:hover{ display: block; /*鼠標滑過時顯示菜單*/ }
我們首先設(shè)置菜單的容器div的display為none,這樣默認情況下菜單是不顯示的。然后在鼠標滑過容器div時,使用:hover選擇器將菜單的display屬性設(shè)置為block,即可實現(xiàn)鼠標滑過時顯示菜單的效果。當然,你還可以進一步美化菜單的樣式,例如設(shè)置菜單的背景色、字體顏色等等。
以上就是使用CSS實現(xiàn)鼠標滑過時顯示菜單的簡單實現(xiàn)方式了,希望對大家有所幫助。
上一篇css鼠標滑過文字變大
下一篇css鏈接右對齊