en muchos sitios, tales como http://www.clearleft.com, te darás cuenta de que cuando los enlaces se cernía sobre, que se desvanecen en un color diferente, ya que se opuso de inmediato de conmutación, la acción predeterminada.

Supongo JavaScript se utiliza para crear este efecto, ¿alguien sabe cómo?

  • Gracias. Ahora, comprendo cómo hacer hover de los enlaces, es solo que estoy tratando de averiguar cómo crear un efecto más suave para mi hover de los enlaces.

4 Comentarios

  1. 318

    Hoy en día la gente sólo usa Transiciones CSS3 porque es mucho más fácil que jugar con JS, soporte de navegador es razonablemente bueno y es meramente cosmética así que no importa si no funciona.

    Algo como esto consigue el trabajo hecho:

    a {
      color:blue;
      /* First we need to help some browsers along for this to work.
         Just because a vendor prefix is there, doesn't mean it will
         work in a browser made by that vendor either, it's just for
         future-proofing purposes I guess. */
      -o-transition:.5s;
      -ms-transition:.5s;
      -moz-transition:.5s;
      -webkit-transition:.5s;
      /* ...and now for the proper property */
      transition:.5s;
    }
    a:hover { color:red; }

    También puede transición específica de las propiedades CSS con horarios diferentes y las funciones de aceleración separando cada declaración con una coma, por ejemplo:

    a {
      color:blue; background:white;
      -o-transition:color .2s ease-out, background 1s ease-in;
      -ms-transition:color .2s ease-out, background 1s ease-in;
      -moz-transition:color .2s ease-out, background 1s ease-in;
      -webkit-transition:color .2s ease-out, background 1s ease-in;
      /* ...and now override with proper CSS property */
      transition:color .2s ease-out, background 1s ease-in;
    }
    a:hover { color:red; background:yellow; }

    Demo aquí

    • funciona en Chrome, Safari, Firefox, Opera – pero falla en IE9.
    • Por suerte, trabaja en IE10 aunque! Ningún proveedor prefijo cualquiera (que raro).
    • He probado ambos y espero que si me pareció correcto razón de que la CSS no es suave y fluido jQuery manera. Por favor me corrija si estoy equivocado.
    • You rock! Bien explicado, me ha ayudado mucho por ver.
    • Que no me funciona en Firefox, solo en Chrome.
    • Firefox 35 aquí y no me funciona. 🙁
    • Mi prueba es con una imagen, no un enlace.
    • mejor enviar una pregunta, supongo que, definitivamente suena como un problema de sintaxis.
    • Hecho: stackoverflow.com/questions/28441749/fade-effect-on-div-hover

  2. 8

    Sé que la pregunta que has estado «supongo JavaScript se utiliza para crear este efecto», pero CSS puede ser usado también, un ejemplo es el de abajo.

    CSS

    .fancy-link {
       color: #333333;
       text-decoration: none;
       transition: color 0.3s linear;
       -webkit-transition: color 0.3s linear;
       -moz-transition: color 0.3s linear;
    }
    
    .fancy-link:hover {
       color: #F44336;
    }

    HTML

    <a class="fancy-link" href="#">My Link</a>

    Y aquí es un JSFIDDLE para el código de arriba!


    Marcel en una de las respuestas de los puntos de salida de la transición», varias de las propiedades CSS» también puede utilizar «todos» a efecto de que el elemento con todos sus :hover estilos, como el de abajo.

    CSS

    .fancy-link {
       color: #333333;
       text-decoration: none;
       transition: all 0.3s linear;
       -webkit-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
    }
    
    .fancy-link:hover {
       color: #F44336;
       padding-left: 10px;
    }

    HTML

    <a class="fancy-link" href="#">My Link</a>

    Y aquí es un JSFIDDLE para el «todo» el ejemplo!

  3. 6

    Usted puede hacer esto con JQueryUI:

    $('a').mouseenter(function(){
      $(this).animate({
        color: '#ff0000'
      }, 1000);
    }).mouseout(function(){
      $(this).animate({
        color: '#000000'
      }, 1000);
    });

    http://jsfiddle.net/dWCbk/

    • usted no necesita jqueryui para eso, jquery
    • No, jQuery sólo puede animar «solo valores numéricos», que los colores no son (ver api.jquery.com/animate/#animation-properties). Pero usted realmente no necesita toda la jQueryUI de la biblioteca, sólo el jQuery.Color plugin, que pasa a ser incrustado dentro de jQueryUI.
    • genial, no sabía eso! pero tienes mi punto de
    • Sahlin. Me encontré con su violín búsqueda de las transiciones de la CSS. Su JQuery-UI transición es mucho más suave, estoy seguro de que los usuarios lo noten.
    • Hay soluciones con css, que es la forma más fácil de implementar
  4. 2

    Intente esto en tu css:

    .a {
        transition: color 0.3s ease-in-out;
    }
    .a {
        color:turquoise;
    }
    .a:hover {
        color: #454545;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here