CSS实线鼠标移入显示隐藏div
生活随笔
收集整理的這篇文章主要介紹了
CSS实线鼠标移入显示隐藏div
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
用CSS中的 hover 事件，實線鼠標移入顯示隱藏元素。
?效果如下：
?代碼如下：
<!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>鼠標移入顯示文章</h1><div id="no"><h1 class="jx-top">宋詞精選</h1><h3>浣溪沙</h3><h4>——宋·蘇軾</h4><p>一曲新詞酒一杯，</p><p>去年天氣舊亭臺。</p><p>夕陽西下幾時回？</p><p>無可奈何花落去，</p><p>似曾相識燕歸來。</p><p>小園香徑獨徘徊</p></div></div></body> </html>?
總結
以上是生活随笔為你收集整理的CSS实线鼠标移入显示隐藏div的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS 中如何添加应用自己的字体，使用萍
- 下一篇： 精品基于Uniapp+SSM实现的记账a