jQuery colorplugin停止CSS：悬停工作

问题描述：

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

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

任何人都可以提出一个解决方案，这样，当“脉冲”显示，原始:hover行为继续工作？

答

定义:hover的规则与!important，所以当JavaScript设置内联样式时，它将覆盖它。

感谢您:-D这样一个简单的答案 - 我想这将是巨大的一些片的JS。 +1 – Bojangles 2010-12-19 23:12:41

重要！根据所需的效果，OP可以使用！重要的（如果悬停比效果更重要）或我的建议，如果他想看动画即使悬停，但恢复到正常的悬停行为。 – 2010-12-19 23:14:35

动画只出现一次 - 它应用于在AJAX调用后添加的新'li'元素，所以'！important'很好:-) – Bojangles 2010-12-19 23:18:47

答

你需要停止动画并删除内嵌样式 - 一个例子，让你开始：

$(".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; 
}

答

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

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

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

jQuery colorplugin停止CSS：悬停工作

相关推荐