jQuery colorplugin para CSS: hover working - jquery, css, cores, hover

Eu estou usando o jQUery plugin de cores. eu tenho um li elemento que, ao passar o mouse, altera a cor de fundo. Isso é feito usando o padrão :hover Pseudo classe CSS no arquivo CSS. Isso funciona bem, até eu usar o plugin de cores nele - o :hover O efeito simplesmente para de funcionar quando eu "pressiono" o elemento usando este código:

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

Alguém pode sugerir uma solução para que, quando o "pulso" for exibido, o original :hover comportamento continua a funcionar?

Respostas:

Defina a regra para :hover com !important portanto, quando o JavaScript definir o estilo embutido, ele será substituído.

Você precisará interromper a animação e remover os estilos embutidos - um exemplo para começar:

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

Alternativamente, você pode fazer o seu css assim:

li:hover {
background:red !important;
}

O problema parece ser a cor de plano de fundo explícita definida no elemento, que está substituindo o CSS. No final da sua animação, limpe a cor de fundo da seguinte maneira:

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

Exemplo de trabalho: http://jsfiddle.net/SyqSf/