Fix mouseover with toggle buttons and child DIV's

Question

I have a toggle script that works great, but I'm trying to add a mouseover effect and I'm having trouble with it.

I have four tags, two of which are simple DIV's with background colors, and I have two additional Buttons with background images.

I created a mouseover effect for all tags, but it doesn't look right when I click on a button. Once I click a button, the button needs to change background-position upon click and the mousever should stop over the buttons.

Here is my link: http://jsfiddle.net/eriksnet/9cr4F/1/

Thank you.

Answer 1

It's because #r6:hover .gnM has a higher precedence over .button-toogle-on . CSS has an hierarchy of CSS, based on where it's defined, if it's inline or not, how many elements you specify. Read more here .

Anyways, this works:

#r6 #bxGender .button-toggle-on {
    background-position: 0 -120px
}

jsfiddle: http://jsfiddle.net/9cr4F/3/