jQuery colorplugin stops CSS :hover working

I am using the jQUery color plugin. I have an li element that, when hovered over, changes it's backg开发者_JAVA技巧round color. It does this by using the standard :hover CSS pseudo class in the CSS file. This works fine, until I use the color plugin on it - the :hover effect just stops working when I 'pulse' the element using this code:

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

Can anyone suggest a solution so that, when the 'pulse' is displayed, the original :hover behaviour continues to work?

Define the rule for :hover with !important so when the JavaScript sets the inline style, it will override it.

You'll need to stop the animation and remove the inline styles - an example to get you started:

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

Alternatively you could do your css like this:

li:hover {
  background:red !important;
}

The problem appears to be the explicit background colour set on the element, which is overriding the CSS. At the end of your animation, clear out the background colour like this:

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

Working example: http://jsfiddle.net/SyqSf/