关于jss效果后覆盖的css :: hover属性，如何找回它？

:hover property overriden after jquery effect, how to get it back?

我有动画功能...

1
2
3
4
5

function flashGreen(e) {
backg = e.css('backgroundColor');
e.animate({ backgroundColor:"#5ccc96" }, 1000);
e.animate({ backgroundColor: backg }, 500);
}

像这样的CSS

1
2
3
4
5
6
7
8
9

.container {
padding:5px;
background:#eaeaea;
}
.containerr:hover {
border:1px #558ecb solid;
background:#7dcdf2;
padding:4px;
}

在我调用flashGreen函数之前，悬停按需要工作，但是在我调用该函数之后，背景颜色不再更改，但边框仍然出现。

到底是怎么回事？我注意到jQuery在动画函数之后使用backgroundColor向我的div添加了一个"样式"属性。因此，我认为"样式"覆盖了类的属性。

在backgroundColor上调用animate后，如何使背景色悬停工作。

这是优先级/优先级问题。由于动画为元素提供了style="background-color"，因此它优先于CSS文件。发生这种情况是因为内联样式优先于任何非内联样式(至少在正常情况下)。

当我发布解释时，peirix发布了解决方案。

正如您已经注意到的，jQuery向您的元素添加了style属性。您可以在动画制作完成后将其删除

1
2
3

e.animate({ backgroundColor: backg }, 500, function() {
e.removeAttr("style");
});