为什么鼠标悬停时p标签文本和边框高度增加不工作?主要原因是什么?
html:<body>
<div class="cheap">
<p id= "pen">hello hannan .hello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannan</p>
</div>
</body>
CSS:
.cheap {
width:500px;
height: 500px;
border: 1px solid rgb(25%,55%,45%);
height: 10px;
}
p{
display: none;
}
.cheap:hover {
width:400px;
height:500px;
}
p:hover {
display: block;
}
这很简单。试试这个:
.cheap:hover p{
display:block;
}
添加到CSS文件的最后。
演示想想看:如果段落没有显示，你怎么把它悬停呢?
这个CSS可以工作。在你的默认CSS中，你的P元素被display:none隐藏，所以你必须对.cheap类
.cheap {
width:500px;
height: 500px;
border: 1px solid rgb(25%,55%,45%);
height: 10px;
}
.cheap p{
display: none;
}
.cheap:hover {
width:400px;
height:500px;
}
.cheap:hover p {
display: block;
}