Estoy intentando lograr que al pasar el ratón por encima con :hover el color del texto dentro de
como enlace tenga un color determinado pero por mas pruebas que hago siempre sale en blanco tanto el fondo como el texto y solo si me posiciono dentro del texto sale en color azul.
<!-- Introduction -->
<section id="inicio">
<article class="header">
<h1><span>Título</span><br>
Más contenido del título <br>
Última frase del título.
</h1>
<p><a href="contacto" title="Contácteme" class="boton-contactar"> Contácteme</a></p>
</article>
</section>
:root {
--azul-marino-oscuro: #354355;
}
#inicio p{
background: var(--azul-marino-oscuro);
color: white;
margin-top: 1rem;
border-radius:10px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
width: 36%;
padding: 1rem;
transition: all 400ms ease;
}
#inicio p:hover{
background-color: white;
color: var(--azul-marino-oscuro) !important;
cursor: pointer;
}
#inicio p > a.boton-contactar:hover{
color: var(--azul-marino-oscuro) !important;
}
¿Como puedo hacer para que salga dicho color --azul-marino-oscuro al pasar el ratón en :hover sobre el blanco de
sin tocar ? Es decir que incluya todo el fondo en el :hover y no solo el texto que hay en para reconocer el nuevo color.