jQuery colorplugin 停止 CSS :hover 工作答案

【问题标题】：jQuery colorplugin stops CSS :hover workingjQuery colorplugin 停止 CSS :hover 工作
【发布时间】：2011-05-28 00:05:41
【问题描述】：

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

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

谁能提出一个解决方案，以便在显示“脉冲”时，原来的:hover 行为继续有效？

【问题讨论】：

标签： jquery css colors hover

【解决方案1】：

用!important 定义:hover 的规则，这样当JavaScript 设置内联样式时，它会覆盖它。

【讨论】：

谢谢 :-D 这么简单的答案 - 我以为这将是一个巨大的 JS 片段。 +1
好点！重要。根据所需的效果，OP 可以使用 !important （如果悬停比效果更重要）或我的建议，如果他想看到动画即使悬停，但之后恢复正常悬停行为。
动画只出现一次 - 它应用于在 AJAX 调用后添加的新 li 元素，所以 !important 很好:-)

【解决方案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;
}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：