Question

I have this link( ) that has certain css as seen below attached to it. When I press the link, I move the link at a different location on the page. I need to also change the css in the a:active brackets after the link moves. Basically, I would like top to be 0px. The animate function happens but the 2nd line of jquery has no effect. How do I accomplish that?

Html

<div class = "buttons">
<a class = "About" href="#"><span>About Me</span><img src="#" alt="About Me"></a>
</div>

CSS

.buttons a:active{
top:1px; 
}

jquery

$("a.About").click(function(){
        $("a.About").animate({right:'380px', bottom:'110px'},"slow");
                $(".About:active").css("top", "-=1"); });

Answer 1

jQuery doesn’t support an :active selector. You won’t be able to modify the CSS pseudo-selector :active from jQuery. The best bet for you is to add a class to your CSS that does this. And then use jQuery to .addClass() that specific class name.

Edit

If you want to change how a hyperlink behaves when you move it from Section A to Section B you could do seomthing like this:

CSS

a.sectionA:active { background-color:yellow; }
a.sectionB:active { background-color:green; }

HTML

<div class="buttons">
    <a class="sectionA About" href="#"><span>About Me</span><img src="#" alt="About Me"></a>
</div>

Then whenever you want to move the anchor tag from one section to the next, you can do:

$("a").removeClass("sectionA").addClass("sectionB");