web-dev-qa-db-fra.com

Animation de la souris avec CSS et jQuery?

J'utilise des transitions CSS pour animer une couleur d'arrière-plan au 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 puis-je animer la souris avec CSS?

  2. Comment faire cela en utilisant jQuery uniquement ?

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

jqueryhtmlcsscss-transitions
14
It worked yesterday.

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 vers la pseudo classe.

2)

Avec jQuery, vous aurez besoin soit de deux éléments à fondre, soit d'un plugin d'animation couleur. jQuery UI a une animation de couleur intégrée, et vous pouvez ensuite 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à jQuery UI pour autre chose, je vous suggère d'utiliser l'un des plugins beaucoup plus petits, comme celui-ci !!

24
adeneo

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
mohkhan