Question

我正在尝试使用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

谢谢！

Answer 1

替换：

.pledges_boutons:hover {

使用：

.pledges_boutons:hover, .pledges_boutons:hover a {

那就行了; - ）

Answer 2

有多种方法可以解决这个问题，但基本上你需要提供一个特定的选择器，以便在父项悬停时覆盖锚的样式。

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

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

Answer 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;
}

Answer 4

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

DIV（css）上的悬停问题

4 个答案: