jQuery 动画 CSS，设置悬停状态

发布于 2024-09-29 15:55:59 字数 970 浏览 2 评论 0原文

我有一个更新按钮，我想在更新内容时引起注意。我正在使用动画颜色淡入淡出并添加一些箭头字符来做到这一点。

动画完成后，我希望我的 CSS :hover 状态恢复。
这可能吗，还是我会丢失原始 CSS，我是否必须使用 jQuery 的 hover() 重置这些

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>

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");
    });
})

原文

I have an update button on which I want to pull attention when updating my content. I am doing this with an animation color fade and adding some arrow characters.

When the animation is finished I want my CSS :hover states back.
Is this possible or do I lose the original CSS and do I have to reset these with jQuery's hover()

Fiddle: 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>

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");
    });
})

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笙痞 2024-10-06 15:55:59

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

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

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

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

This may not be the most elegant solution, but you could try the following:

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

within your $.animate() callback function.

Edit: I suspect that you're losing your :hover styles because $.animate() uses inline styles, which are set after stylesheet rules are evaluated; thus they take precedence over defined styles within the stylesheet.

回复收藏 0 原文

~没有更多了~