jQuery colorplugin stops CSS :hover working

Question

I am using the jQUery color plugin. I have an li element that, when hovered over, changes it's background 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?

Answer 1

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