CSS - Using :nth-child to select an element

Question

http://jsfiddle.net/weka/FQTyG/

I have a div. In that div is 4 input boxes with 4 boxes to the right of them. It's like "select correct answer" to the question. However, when I hover over one of them, it's suppose to show "Correct?" while the other 3 are marked red X.. and if they don't click and merely hover.. it will revert back to the original selected answer.

However... it's not doing that as you can see. I am using :nth-child as I figure .. after I hover out. Make ALL off the four answers "red" and then make the one answer still selected "green" soon after...

But I can't seem it to make it work... Help?

Answer 1

It sounds like you're asking for help with multiple aspects of how things are displayed. Create a css class for each "state" you want things to be in... correct and incorrect or something.

When the user does something you care about or the form changes, mark all as incorrect, and use jquery logic like you have to choose which needs to be correct . Just add/remove the classes when needed.

If you can clarify the specific point you have trouble with, I can help a bit more specifically.