jQuery动画CSS，设置回悬停状态

Posted 2023-05-08

【中文标题】jQuery动画CSS，设置回悬停状态

【英文标题】：jQuery animate CSS, set back hover state

【发布时间】：2011-05-01 03:09:31

【问题描述】：

我有一个更新按钮，我想在更新我的内容时引起注意。我正在使用动画颜色渐变并添加一些箭头字符来执行此操作。

动画完成后，我希望我的 CSS :hover 状态返回。 这是可能的还是我丢失了原始的 CSS 并且我必须用 jQuery 的hover() 重置这些@

小提琴：http://jsfiddle.net/K6fd2/

CSS

a.btn  padding: 5px 20px; color: white; background-color: #4188FB;  
a.btn:hover  background: #FFCC00;

html

<a href="#" class="btn">Update</a>
<br /><br />
<a href="#" class="change">change content</a>

JS

var oriBtnTxt = $(".btn").html(); // store original text

$(".change").click(function() 
    $(".btn")
    .css("background-color","#FFCC00")
    .html(oriBtnTxt + " »")
    .animate(backgroundColor: "#4188FB", 2000, "swing", function() 
        // set back hover state
        $("a.btn:hover").css("background-color", "#FFCC00");
    );
)

【参考方案1】：

这可能不是最优雅的解决方案，但您可以尝试以下方法：

$(this).removeAttr('style');

在您的 $.animate() 回调函数中。

编辑：我怀疑您正在丢失您的:hover 样式，因为$.animate() 使用内联样式，这些样式是在评估样式表规则之后设置的；因此它们优先于样式表中定义的样式。