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!