悬停在块级别链接中不起作用

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错误或我做错了什么？任何帮助将非常感激。

来源

2014-09-21 Ixillion

您只更改锚标记的颜色，而不是标题元素。如果在HTML5中允许这样做，那么这可能是一个CSS错误，因为我没有看到它。您可以将选择器缩小为.test a:hover h4或.test a h4:hover，以较小者为准。

来源

2014-09-21 00:57:53

这是因为您要更改悬停时的a标记的颜色，而不是h4标记的颜色。由于h4与您想要更改的文本更接近，因此该标记的CSS将覆盖您的a标记的CSS。

试试下面的代码：

.test a:hover h4{ 
    color: red; 
}

，当你将鼠标悬停在a这种情况正在改变的h4颜色。

来源

2014-09-21 00:53:03 AJFarkas

悬停在块级别链接中不起作用

回答

相关问题