悬停在块级别链接中不起作用
问题描述:
HTML5允许在块标签中包装块级别。 但是,似乎只要先前声明了选择器的颜色(例如h4
),则声明新的链接和悬停颜色不起作用。悬停在块级别链接中不起作用
h4 {
color: orange;
}
.test a:link, .test a:active, .test a:visited {
color: green;
display: inline-block;
}
.test a:hover {
color: red;
}
<div class="test">
<a href="#">
<h4>Heading</h4>
<p>This is the paragraph</p>
</a>
</div>
您还可以找到在Codepen这个例子:http://codepen.io/Ixillion/pen/ouBrD
在这个例子中,段落文本具有正确的链接颜色(绿色)和悬停颜色(红色)。 h4
标题没有。
只要您在css中取出h4
声明,它就可以正常工作。不幸的是,这个简单的解决方案在我的项目中不可行
这是一个CSS错误或我做错了什么?任何帮助将非常感激。
答
您只更改锚标记的颜色,而不是标题元素。如果在HTML5中允许这样做,那么这可能是一个CSS错误,因为我没有看到它。您可以将选择器缩小为.test a:hover h4
或.test a h4:hover
,以较小者为准。
答
这是因为您要更改悬停时的a
标记的颜色,而不是h4
标记的颜色。由于h4
与您想要更改的文本更接近,因此该标记的CSS将覆盖您的a
标记的CSS。
试试下面的代码:
.test a:hover h4{
color: red;
}
,当你将鼠标悬停在a
这种情况正在改变的h4
颜色。