kahlito
Curioso
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas.
Estoy intentando lograr que al pasar el ratón por encima con :hover el color del texto dentro de <p> como enlace <a> 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.
¿Como puedo hacer para que salga dicho color --azul-marino-oscuro al pasar el ratón en :hover sobre el blanco de <p> sin tocar <a>? Es decir que incluya todo el fondo en el :hover y no solo el texto que hay en <a> para reconocer el nuevo color.
Saludos.
Estoy intentando lograr que al pasar el ratón por encima con :hover el color del texto dentro de <p> como enlace <a> 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.
HTML:
<!-- 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>
CSS:
: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 <p> sin tocar <a>? Es decir que incluya todo el fondo en el :hover y no solo el texto que hay en <a> para reconocer el nuevo color.
Saludos.
