1

¡¡Hola a todos!!

He tenido una dificultad al crearle una transición de color a un svg cuando posiciono el cursor del ratón por encima del link. El resultado que busco es que el color del icono cambie cuando se pase el cursor por el link, pero con una transición. Muchas gracias a todos los que quieran ayudarme.

.text-center {
    text-align: center;
}

.elements-center svg {
    height: 25px;
    transition: all 0.5s;
    width: 25px;
}

.elements-center {
    display: flex;
    justify-content: center;
}

.elements-center a {
    margin-left: 5px;
    margin-right: 5px;
}
<section class="text-center">
  <h4>CONTACTO</h4>
  <div class="elements-center">
    <a href="#">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><title>email-round</title><path d="M61.44,0A61.46,61.46,0,1,1,18,18,61.21,61.21,0,0,1,61.44,0ZM32.22,79.39,52.1,59.46,32.22,43.25V79.39ZM54.29,61.24,33.79,81.79H88.91L69.33,61.24l-6.46,5.51h0a1.42,1.42,0,0,1-1.8,0l-6.78-5.53Zm17.18-1.82L90.66,79.55V43.07L71.47,59.42ZM34,41.09l27.9,22.76L88.65,41.09Zm65.4-17.64a53.72,53.72,0,1,0,15.74,38,53.56,53.56,0,0,0-15.74-38Z"/>
                            </svg>
    </a>
    <a href="">
      <p id="email">[email protected]</p>
    </a>
  </div>
</section>

1 respuesta 1

1

Revisando un poco este artículo, puedes cambiar de color al svg con la siguiente propiedad:

fill: red;

Y para que el cambio de color ocurra cuando pases el cursor por el link, colocamos la pseudo-clase :hover de la siguiente forma:

.elements-center:hover svg {
  fill: red;
  transition: all 0.5s;
}

Adicionalmente, les agrego estas propiedades a tu link para que no tenga el color por defecto al haberle echo clic:

.elements-center a {
  margin-left: 5px;
  margin-right: 5px;
  text-decoration: none;
  color: black;
}

Demo:

.text-center {
  text-align: center;
}

.elements-center svg {
  height: 25px;
  transition: all 0.5s;
  width: 25px;
}

.elements-center:hover svg {
  fill: red;
  transition: all 0.5s;
}

.elements-center {
  display: flex;
  justify-content: center;
}

.elements-center a {
  margin-left: 5px;
  margin-right: 5px;
  text-decoration: none;
  color: black;
}
<section class="text-center">
  <h4>CONTACTO</h4>
  <div class="elements-center">
    <a href="#">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><title>email-round</title><path d="M61.44,0A61.46,61.46,0,1,1,18,18,61.21,61.21,0,0,1,61.44,0ZM32.22,79.39,52.1,59.46,32.22,43.25V79.39ZM54.29,61.24,33.79,81.79H88.91L69.33,61.24l-6.46,5.51h0a1.42,1.42,0,0,1-1.8,0l-6.78-5.53Zm17.18-1.82L90.66,79.55V43.07L71.47,59.42ZM34,41.09l27.9,22.76L88.65,41.09Zm65.4-17.64a53.72,53.72,0,1,0,15.74,38,53.56,53.56,0,0,0-15.74-38Z"/>
      </svg>
    </a>
    <a href="">
      <p id="email">[email protected]</p>
    </a>
  </div>
</section>

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.