css3 animation on click

Question

The following zip contains the website html and required files: http://dl.getdropbox.com/u/4281191/login.zip

When you hover the html (html:hover) you see a animation that transforms the container into a loginbox, I want that to happen when I click on "Login" at the "Hello, Guest" menu instead.

Anyway to get this done? I'm new to js...

Additional info:

the css is inside the html, and the css3 animation gets triggered by:

html:hover id/class {
    property: value;
}

Thanks for any help! And I can't vote at comments since I don't have enough reputation...but I could do some free design work for the person who helps me ^^

Answer 1

I still don't know much about animations, but for what matters here, you could use something like the .classname:active or .classname:focus selectors. But as soon as you click something inside it (eg a text box), the style will disappear.

So, for this, it really depends. Do you just want a menu that has links that take the user to another page (for this case, you'll be fine) or do you want a login form (for this case, forget it, use jquery)?

For today and future reference, save this link because it'll be your best friend:

http://www.w3.org/TR/selectors/#selectors

Update

Yes, I hovered but I didn't look at the code. I looked now and, unfortunately, the answer is no. You can't affect some upper level object like that using CSS.

For that use jQuery. The simpler way would be use jQuery to add a class to the element you want to change (like $("#the-object-id").addClass('class-name')). To keep the effect add the duration argument. Read this page about Adding a class using jQuery .