jQuery colourplugin blocca CSS: hover working - jquery, css, colors, hover

Sto usando il jQuery plugin per colori. ho un li elemento che, al passaggio del mouse, cambia il suo colore di sfondo. Lo fa usando lo standard :hover Pseudo classe CSS nel file CSS. Funziona bene, fino a quando non uso il plugin colorato su di esso - il :hover l'effetto smette di funzionare quando "impulso" l'elemento usando questo codice:

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

Qualcuno può suggerire una soluzione in modo che, quando viene visualizzato "impulso", l'originale :hover il comportamento continua a funzionare?

risposte:

Definisci la regola per :hover con !important così, quando JavaScript imposta lo stile in linea, lo sovrascriverà.

Dovrai interrompere l'animazione e rimuovere gli stili in linea, un esempio per iniziare:

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

In alternativa puoi fare il tuo css in questo modo:

li:hover {
background:red !important;
}

Il problema sembra essere il colore di sfondo esplicito impostato sull'elemento, che sta sovrascrivendo il CSS. Alla fine dell'animazione, cancella il colore dello sfondo in questo modo:

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

Esempio di lavoro: http://jsfiddle.net/SyqSf/