L'animation de la souris laisser avec CSS et jQuery?

Je suis en utilisant les transitions CSS pour animer une couleur d'arrière-plan sur la souris passe dessus.

J'ai le code suivant:

CSS:

div {
  width: 100px;
  height: 100px;
  background: red;
}

div:hover {
  background: green;
  transition: all 0.5s ease-in-out;
}

HTML:

<div></div>

Ce code n'anime la couleur d'arrière-plan sur la souris sur. Il n'a pas réanimer la souris off. J'ai 2 questions:

  1. Comment animer la souris désactivé à l'aide de CSS?

  2. Comment puis-je le faire à l'aide de jQuery seulement?

jsfiddle: http://jsfiddle.net/fz39N/

InformationsquelleAutor Monkey D Luffy | 2013-06-18
  1. 24

    1) Vous modifier votre css pour

    div {
    width: 100px;
    height: 100px;  
    background: red;
    transition: background 0.5s ease-in-out;
}

div:hover {
    background: green;

}

    VIOLON

    réglage de la transition à l'élément, et pas le pseudo de la classe.

    2)

    Avec jQuery, vous aurez besoin de deux éléments cross fade, ou d'une animation de couleur plugin. jQuery UI a la couleur de l'animation construite dans, et ensuite vous pouvez faire :

    $('div').on({
    mouseenter: function() {
        $(this).animate({backgroundColor: 'green'},1000)
    },
    mouseleave: function() {
        $(this).animate({backgroundColor: 'red'},1000)
    }
});

    VIOLON

    Si vous n'êtes pas déjà en utilisant jQuery UI pour autre chose, je vous suggère de l'aide de l'un de la plus petite des plugins, comme cette une !!

    InformationsquelleAutor adeneo
  2. 3

    Cela devrait résoudre votre problème

    div {
    width: 100px;
    height: 100px;  
    background-color: red;
    transition: background-color 0.5s;
}

div:hover {
    background-color: green;
}
    InformationsquelleAutor mohkhan