1

早上好，

当用户将鼠标悬停在链接上时，我正在尝试更改链接的背景颜色。使用我当前的代码，链接颜色将按预期更改，但背景颜色不会更改。如果我将伪类附加到不同的标签，比如“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;
}

如果这有所作为，我也在使用 Meyer 的重置。到目前为止，它没有问题。

4

2 回答 2

1

问题出在<h4>标签内的<a>标签上。您正在设计<a>，而不是<h4>.

两种解决方案：

首先，<h4>完全删除标签。这将解决问题，老实说，这些标签真的没有必要（无论如何<h4>你都在设置字体大小）。<a>

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

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

希望有帮助。

[编辑]

h4可以在这里看到添加到悬停选择器的不同之处：http: //jsfiddle.net/C7UKp/

于 2011-10-12T13:51:22.267 回答
0

尝试将此添加到您的css

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

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

于 2011-10-12T13:52:39.420 回答