Question Animation de la souris laisse avec CSS et jQuery?


J'utilise des transitions CSS pour animer une couleur d'arrière-plan lors du survol de la souris.

J'ai le code suivant:

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

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

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

  1. Comment animer la souris avec CSS?

  2. Comment puis-je faire cela en utilisant jQuery uniquement?

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


13
2018-06-18 11:49


origine


Réponses:


1) Vous changez votre css en

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

div:hover {
    background: green;

}

VIOLON

définir la transition vers l'élément et non la pseudo-classe.


2)

Avec jQuery, vous aurez besoin de deux éléments pour effectuer un fondu, ou d’un plug-in d’animation couleur. jQuery UI a une animation couleur intégrée, et vous pouvez alors faire:

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

VIOLON

Si vous n'utilisez pas déjà l'interface utilisateur jQuery pour autre chose, je vous suggère d'utiliser l'un des plugins les plus petits, comme celui-là !!


24
2018-06-18 11:51



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;
}

3
2018-06-18 12:00