DIV（css）上的悬停问题答案

【问题标题】：Hover issue on DIV (css)DIV（css）上的悬停问题
【发布时间】：2012-09-29 01:34:50
【问题描述】：

我正在尝试使用 div 做一个非常简单的按钮。一切都很好，除了当鼠标光标移到按钮上时，文本应该变成黑色，背景颜色是白色......但是目前，我必须将鼠标光标放在文本上才能看到它变成黑色。

这是我的 CSS 代码：

.pledges_boutons {
    width: 157px;
    color: #fff;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 11px;
    height: 18px;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-decoration: none;
    display: block;
    background-color: #868686;
    }

和悬停：

.pledges_boutons:hover {
    color: #000;
    cursor: pointer;
    background-color: #fff;
}

HTML：

<div class="pledges_boutons">
   <a href="http://www.google.com">Click here</a>
</div>

这是我的fiddle

谢谢！

【问题讨论】：

请在问题中包含您的 HTML。不要依赖 jsFiddle 演示。已编辑。

标签： html css

【解决方案1】：

替换：

.pledges_boutons:hover {

与：

.pledges_boutons:hover, .pledges_boutons:hover a {

这样就可以了 ;-)

【讨论】：

【解决方案2】：

有多种方法可以处理这个问题，但基本上你需要提供一个足够具体的选择器来覆盖父级悬停时锚点的样式。

示例：http://jsfiddle.net/6JCWn/1/

.pledges_boutons:hover a {
    color: #000;
}

【讨论】：

【解决方案3】：

这是因为您专门将链接设置为白色：

.pledges_boutons a:link {
    text-decoration:none;
    color:#fff;
}

使用比以下更具体的选择器将链接设置为白色：

.pledges_boutons:hover {
    color: #000;
    cursor: pointer;
    background-color: #fff;
}

所以你想做的就是把它改成

.pledges_boutons:hover,
.pledges_boutons:hover a {
    color: #000;
    cursor: pointer;
    background-color: #fff;
}

一旦你这样做了，你可以直接删除它上面的规则，因为它会变得多余：

.pledges_boutons a:hover {
    color:#000;
    background-color:white;
}

【讨论】：

【解决方案4】：

ctrl+F5 清除浏览器页面缓存；浏览器缓存css文件。

【讨论】：