I'm trying to make hovering with :hover the color of the text inside
as a link it has a certain color but for more tests that I do, both the background and the text always come out in white and only if I position myself within the text it comes out in blue.
<!-- 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;
}
How can I make the --dark-navy-blue-blue-color come out when I move the mouse in :hover over the white of
without touching ? In other words, include the entire background in the :hover and not just the text in it to recognize the new color.
I have simply changed the element to which you apply the hover, you applied it to the element
a
that is the one affected by the change but it is not the one that you try to activate it, so you only have to change:by