无法仅使用 CSS 更改背景颜色
早上好，
当用户将鼠标悬停在链接上时，我正在尝试更改链接上的背景颜色。使用我当前的代码，链接颜色将按预期更改，但背景颜色不会更改。如果我将伪类附加到不同的标签，例如“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 的重置。到目前为止还没有出现任何问题。
Good morning,
I'm trying to change the background color on a link when the user hovers over it. With my current code, the link color will change as expected, but no change to the background color. If I attach the pseudo-class to a different tag, say "SPAN", then everything works as it should. I naturally suspect the "A" tag is to blame, but I can't figure it out at all. Been staring at this thing since last night. Markup:
<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;
}
I'm also using Meyer's reset if that makes a difference. So far it's been problem-free.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
问题在于
标签内的标签。您正在设计的样式，而不是。两种解决方案：
首先，完全删除
标签。这将解决问题，说实话，那些标签确实没有必要（您正在设置上的字体大小）反正）。或者，如果您想保持标记不变，则需要将
h4添加到您的样式（特别是悬停样式）中，如下所示：希望有帮助。
[编辑]
可以在此处查看将
h4添加到悬停选择器所产生的差异的演示：http://jsfiddle.net/C7UKp/The problem is down to the
<h4>tags you've got inside the<a>tags. You're styling the<a>, not the<h4>.Two solutions:
Firstly, remove the
<h4>tags entirely. This will solve the problem, and to be honest, those<h4>tags really aren't necessary (you're setting the font size on the<a>anyway).Alternatively, if you want to keep your markup as it is, you'll need to add
h4to your styles (particularly the hover style), like so:Hope that helps.
[EDIT]
Demonstration of the difference it makes to add the
h4to the hover selector can be seen here: http://jsfiddle.net/C7UKp/尝试将其添加到您的
csshttp://jsfiddle.net/Xk7Jp/1/< /a>
try adding this to your
csshttp://jsfiddle.net/Xk7Jp/1/