Question

早上好，

当用户将鼠标悬停在链接上时，我正在尝试更改链接的背景颜色。使用我当前的代码，链接颜色将按预期更改，但不会更改背景颜色。如果我将伪类附加到另一个标记，比如说“SPAN”，那么一切都按预期工作。我自然怀疑“A”标签应该受到指责，但我根本无法弄明白。从昨晚开始就一直盯着这件事。标记：

    <div id="thumbAboutWrap">
        <h4 class="contact">ADAM [AT] LAYEREDFEEDBACK [DOT] COM</h4>
        <a class="contact" href="#"><h4>FACEBOOK</h4></a>
        <a class="contact" href="#"><h4>LAST.FM</h4></a>
        <a class="contact" href="#"><h4>LINKEDIN</h4><a/>
    </div><!--thumbAboutWrap-->

CSS：

a.contact {
font-size:50px;
font-weight:800;
}

a.contact:hover {
background-color:#000;
color:#FFF;
}

如果有所不同，我也会使用迈耶的重置。到目前为止，它一直没有问题。

Answer 1

问题在于<h4>标记内的<a>标记。您的样式为<a>，而不是<h4>。

两种解决方案：

首先，完全删除<h4>标记。这样可以解决问题，说实话，这些<h4>标签实际上并不是必需的（无论如何你都在<a>设置字体大小。）

或者，如果您想保持标记不变，则需要在样式中添加h4（尤其是悬停样式），如下所示：

a.contact:hover h4 {
  background-color:#000;
  color:#FFF;
}

希望有所帮助。

[编辑]

可以在此处看到将h4添加到悬停选择器所产生的差异的演示：http://jsfiddle.net/C7UKp/

Answer 2

尝试将此添加到您的css

a.contact {
font-size:50px;
font-weight:800;
display: block;
overflow: hidden;
margin-bottom: 5px;
}

http://jsfiddle.net/Xk7Jp/1/

不能仅使用CSS更改背景颜色

2 个答案: