Question

我正在使用jQUery color plugin。我有一个li元素，当它悬停时，会改变它的背景颜色。它通过在CSS文件中使用标准:hover CSS伪类来实现。这个工作正常，直到我使用它上面的颜色插件 - :hover效果在我使用此代码“脉冲”元素时停止工作：

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

任何人都可以建议一个解决方案，以便在显示“脉冲”时原始的:hover行为继续有效吗？

Answer 1

使用:hover为!important定义规则，因此当JavaScript设置内联样式时，它将覆盖它。

Answer 2

您需要停止动画并删除内联样式 - 这是一个让您入门的示例：

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

或者你可以像这样做你的css：

li:hover {
  background:red !important;
}

Answer 3

问题似乎是元素上的显式背景颜色设置，它覆盖了CSS。在动画结束时，清除背景颜色，如下所示：

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

工作示例：http://jsfiddle.net/SyqSf/

jQuery colorplugin停止CSS：悬停工作

3 个答案: