Home/ Questions/Q 3311280
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T21:51:30+00:00

I have an update button on which I want to pull attention when updating

  • 0

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>

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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