用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>