Using the hover event in CSS, the solid line mouse moves in to display hidden elements.
The effect is as follows:
code show as below:
<!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>