使用切换按钮和子 DIV 修复鼠标悬停答案

【问题标题】：Fix mouseover with toggle buttons and child DIV's使用切换按钮和子 DIV 修复鼠标悬停
【发布时间】：2012-04-13 15:43:58
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

【解决方案1】：

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

无论如何，这行得通：

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

【讨论】：

谢谢。单击按钮时是否可以完全关闭鼠标悬停并将DIV更改为绿色并将按钮背景位置更改为“0 -180px”？非常感谢您的帮助。
单击男性或女性后，我想要以下内容：(1) 两个 DIV 的背景颜色更改为 #2F2F2F 并且鼠标悬停效果停止并且 (2) 按钮未选择背景位置到“0 -180px”
有点骇人听闻，但你去吧：jsfiddle.net/9cr4F/8 编辑：有选择时更改了 2 个 div 的字体颜色：jsfiddle.net/9cr4F/9
谢谢小大机器人。您的帮助去了一个即将在美国推出的新的非营利组织。非常感谢您的帮助！！上帝保佑。