2

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.

2
  • 1
    No deberías usar important, rompe la especificidad y la cascada, es una mala práctica
    – user128299
    Commented el 10 jun. 2020 a las 21:10
  • Al no encontrar el error los puse por si colaban pero normalmente no los uso. Gracias BetaM por la recomendación Commented el 10 jun. 2020 a las 21:27

2 respuestas 2

3

<!-- 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>
<style>
: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:hover > a.boton-contactar{    
    color: var(--azul-marino-oscuro) !important;    
}
</style>

Simplemente he cambiado el elemento al que aplicas el hover, lo aplicabas al elemento a que es el afectado por el cambio pero no es el que intentas que lo active, entonces solo hay que cambiar:

#inicio p > a.boton-contactar:hover

por

#inicio p:hover > a.boton-contactar
1

   p > a.colorx{    
        color: black;
        cursor: pointer;        
    }

    p:hover > a.colorx{    
        color: red;    
    }
<p><a href="#" class="colorx">Cambia con el hover</a></p>

1
  • Si explicaras tu código sería aún mejor y mas fácil de entenderlo
    – user128299
    Commented el 10 jun. 2020 a las 21:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.