CSS实线鼠标移入显示隐藏div
生活随笔
收集整理的這篇文章主要介紹了
CSS实线鼠标移入显示隐藏div
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
用CSS中的 hover 事件，實(shí)線鼠標(biāo)移入顯示隱藏元素。
?效果如下：
?代碼如下：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>移入顯示</title><style>.hov{width: 300px;background-color: #FFA500;border-radius: 10px;}.hov>h1{background-color: #6495ED;width: 300px;height: 60px;line-height: 60px;color: white;text-align: center;border-radius: 10px;}#no{width: 300px;text-align: center;display: none;}.hov:hover #no{display: block;}#no p{width: 250px;height: 30px;line-height: 30px;margin: 0 auto;font: 20px;}#no p:hover{background-color: darkcyan;color: white;border-radius: 5px;}</style></head><body><div class="hov"><h1>鼠標(biāo)移入顯示文章</h1><div id="no"><h1 class="jx-top">宋詞精選</h1><h3>浣溪沙</h3><h4>——宋·蘇軾</h4><p>一曲新詞酒一杯，</p><p>去年天氣舊亭臺(tái)。</p><p>夕陽(yáng)西下幾時(shí)回？</p><p>無(wú)可奈何花落去，</p><p>似曾相識(shí)燕歸來(lái)。</p><p>小園香徑獨(dú)徘徊</p></div></div></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的CSS实线鼠标移入显示隐藏div的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： iOS 中如何添加应用自己的字体，使用萍
- 下一篇： 精品基于Uniapp+SSM实现的记账a