悬停不在块级链接中工作

Posted 2021-04-14

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

答案

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

另一答案

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

请尝试以下代码：

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

当你将鼠标悬停在h4上时，这会改变a的颜色。