0

Tengo un problema con CSS, quiero colocar una transición de estilos de un elemento en su estado hover, eso funciona, pero también hace la transición al recargar la página o al hacer clic (ya que es un enlace)y no es lo que estoy buscando. Comparto el código.

index.html

<!DOCTYPE html>
<html lang="es">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ESTILOS CSS</title>
        <link rel="icon" type="image/x-icon" href="img/logo.png">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    
    <body>
        <header id="header">
            <div id="logotipo">
                <img src="img/logo.png" alt="Logotipo de la web">
            </div>
            <h1>
                <a href="index.html">ESTILOS CSS</a>
            </h1>
        </header>
   
    </body>
    
    </html>

style.css

#header h1 {
    text-align: center;
    font-size: 40px;
    color: #70b231;
    font-family: "nevis";
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-top: 10px;
    text-shadow: 0px 2px 1px #333333;
    transition: all 300ms ease-out;
}

#header h1 a {
    color: #70b231;
}

#header h1:hover {
    text-shadow: 0px 2px 1px #333333, 0px 0px 4px #70b231;
}

¿Alguna idea que pueda ayudar? Saludos!

2 respuestas 2

0

De esta forma funciona bien, (pase la transición a la (pseudoClase hover) pero voy a tener un cambio brusco de estilos al quitar el hover, al menos se acerca a lo que busco.

#header h1 {
        text-align: center;
        font-size: 40px;
        color: #70b231;
        font-family: "nevis";
        text-transform: uppercase;
        letter-spacing: 4px;
        margin-top: 10px;
        text-shadow: 0px 2px 1px #333333;
    }

#header h1 a {
    color: #70b231;
}

#header h1:hover a {
    text-shadow: 0px 2px 1px #333333, 0px 0px 4px #70b231;
    transition: all 300ms;
}
0

El estado hover debes aplicarlo a a y no a h1 del mismo modo la transición. El problema con aplicar el hover al h1, es que es funciona como bloque {display: block}, entonces el hover te lo aplica a todo el reglón y no solo sobre el texto.

#header h1 {
    text-align: center;
    font-size: 40px;
    color: #70b231;
    font-family: "nevis";
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-top: 10px;
}

#header h1 a {
    color: #70b231;
    text-shadow: 0px 2px 1px #333333;
    transition: all 300ms ease-out;
}

#header h1 a:hover {
    text-shadow: 0px 2px 1px #333333, 0px 0px 4px #70b231;
}
<html lang="es">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ESTILOS CSS</title>
        <link rel="icon" type="image/x-icon" href="img/logo.png">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    
    <body>
        <header id="header">
            <div id="logotipo">
                <img src="img/logo.png" alt="Logotipo de la web">
            </div>
            <h1>
                <a href="index.html">ESTILOS CSS</a>
            </h1>
        </header>
   
    </body>
    
    </html>

3
  • Gracias. Probé de esta forma pero no soluciona el problema, me sigue haciendo la transición al cargar la página, me funcionó al colocar la transición dentro de la pseudo-clase hover, pero tendré un cambio brusco al quitar el hover. Me llama la atención porque estoy siguiendo un tutorial que lo hace tal como lo muestro, y no le pasa lo mismo. Saludos.
    – FerMV
    Commented el 16 dic. 2020 a las 15:00
  • Revisa con la edición que acabo de realizar
    – Elboy
    Commented el 16 dic. 2020 a las 16:17
  • Muchas gracias, probé con tu modificación y me sigue pasando lo mismo.
    – FerMV
    Commented el 17 dic. 2020 a las 11:15

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.