javascript - 使用切换按钮和子 DIV 修复鼠标悬停

Question

我有一个效果很好的切换脚本，但我正在尝试添加鼠标悬停效果，但我遇到了麻烦。

我有四个标签，其中两个是带有背景颜色的简单 DIV，还有两个带有背景图像的附加按钮。

我为所有标签创建了鼠标悬停效果，但是当我单击按钮时它看起来不正确。单击按钮后，该按钮需要在单击时更改背景位置，并且鼠标悬停在按钮上。

这是我的链接：http: //jsfiddle.net/eriksnet/9cr4F/1/

谢谢你。

Answer 1

这是因为#r6:hover .gnM优先级高于.button-toogle-on. CSS 有一个 CSS 层次结构，取决于它的定义位置、是否内联以及您指定的元素数量。在这里阅读更多。

无论如何，这有效：

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

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