jQuery colorplugin arrête CSS: le survol fonctionne - jquery, css, couleurs, survol

J'utilise le jQUery plugin de couleur. j'ai un li élément qui, lorsqu'il est survolé, change la couleur d’arrière-plan. Il le fait en utilisant la norme :hover Pseudo-classe CSS dans le fichier CSS. Cela fonctionne bien, jusqu’à ce que j’utilise le plugin de couleur dessus - le :hover L'effet cesse juste de fonctionner lorsque je "palpe" l'élément à l'aide de ce code:

$(".elements").first()
.delay(400)
.css({ backgroundColor: "#eeeeee" })
.animate({ backgroundColor: "#888888" }, 2000);

Quelqu'un peut-il suggérer une solution pour que, lorsque "l'impulsion" est affichée, l'original :hover le comportement continue de fonctionner?

Réponses:

Définir la règle pour :hover avec !important Ainsi, lorsque JavaScript définit le style en ligne, il le remplace.

"Vous devrez arrêter l'animation et supprimer les styles en ligne - un exemple pour vous aider à démarrer:

$(".elements").hover(function(){
$(this).stop().removeAttr("style")},
function(){
$(".elements").first().delay(400).css({backgroundColor: "#eeeeee"}).animate({backgroundColor: "#888888"}, 2000);
});

Sinon, vous pouvez faire votre css comme ceci:

li:hover {
background:red !important;
}

Le problème semble être la couleur de fond explicite définie sur l'élément, qui remplace le CSS. A la fin de votre animation, effacez la couleur de fond comme ceci:

$(".elements").first()
.delay(400)
.css({backgroundColor: "#eeeeee"})
.animate({backgroundColor: "#888888"}, 2000, function() {
$(this).css({backgroundColor: ""});
});

Exemple de travail: http://jsfiddle.net/SyqSf/