Skip to main content
se eliminaron 3 caracteres en el cuerpo
Origen Enlace

¡¡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 el 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>

¡¡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 el 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>

¡¡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>

Origen Enlace

¿Cómo cambiar el color de un svg por medio del hover de otro elemento?

¡¡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 el 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>