Why doesn't the P tag text and border height increase work when it is hovered over by a mouse? What could be causing this issue?
Here is the HTML code snippet:
<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 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;
}