Html P标签文本和边框高度悬停不起作用_Html_Css

Html P标签文本和边框高度悬停不起作用

html css

Html P标签文本和边框高度悬停不起作用,html,css,Html,Css,当鼠标悬停时，为什么p标记文本和边框高度增加不起作用？主要原因是什么 html: <body> <div class="cheap"> <p id= "pen">hello hannan .hello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello

当鼠标悬停时，为什么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;
}


哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰哈啰
CSS:
.便宜{
宽度：500px；
高度：500px；
边界：1px固体rgb（25%，55%，45%）；
高度：10px；
}
p{
显示：无；
}
.便宜：悬停{
宽度：400px；
高度：500px；
}
p:悬停{
显示：块；
}

此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;
}

这很容易。试试这个：

.cheap:hover p{
display:block;
}

将其添加到css文件的最后一个位置

想一想：如果段落显示为“无”，您如何将其悬停

您正在测试哪个浏览器？例如：？