Question

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

当动画结束时我想要我的CSS：悬停状态回来这是可能的还是我丢失了原始CSS，我是否必须使用jQuery hover()

重置这些CSS

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 + " &raquo;")
    .animate({backgroundColor: "#4188FB"}, 2000, "swing", function() {
        // set back hover state
        $("a.btn:hover").css("background-color", "#FFCC00");
    });
})

Answer 1

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

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

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

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

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

1 个答案: