jQuery colorplugin 停止 CSS :hover 工作

Posted 2023-03-06

【中文标题】jQuery colorplugin 停止 CSS :hover 工作

【英文标题】：jQuery colorplugin stops CSS :hover working

【发布时间】：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 行为继续有效？

【参考方案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/