Estou estudando sobre classes e ids e me deparei com esse problema abaixo. Seria possível deixar somente o "TEXTO ESCONDIDO" sem o sublinhado?
div:hover{
color: rgb(96, 96, 226);
text-decoration: underline;
}
div > p {
display: none;
}
div:hover > p{
display: block;
background-color: rgb(226, 171, 70);
color: rgb(80, 19, 179);
font-weight: 800;
font-style: italic;
font-size: 20px;
width: 250px;
}
<h1>Exemplo de hover</h1>
<p>Passe o mouse sobre o texto abaixo</p>
<div>
Passe o mouse aqui
<p>TEXTO ESCONDIDO...</p>
</div>
Já tentei o seguinte:
div:hover > p {
text-decoration: none;
}
Tentei criar ids, classes e utilizar inline CSS, mas nada funciona.