3

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

这是我的小提琴

谢谢！

4

4 回答 4

8

代替：

.pledges_boutons:hover {

和：

.pledges_boutons:hover, .pledges_boutons:hover a {

这样就可以了；-)

于 2012-09-28T17:29:43.223 回答
3

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

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

.pledges_boutons:hover a {
    color: #000;
}
于 2012-09-28T17:30:22.970 回答
1

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

.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;
}
于 2012-09-28T17:32:46.070 回答
-1

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

于 2012-09-28T17:31:37.010 回答