Question

HTML5允许将块级别包装在锚标记中。但是，似乎只要先前声明了选择器的颜色（在示例h4中），声明新链接和悬停颜色就不起作用。

＆＃13;

h4 {
    color: orange;
}

.test a:link, .test a:active, .test a:visited {
    color: green;
    display: inline-block;
}

.test a:hover {
    color: red;
}

＆＃13;

<div class="test">
    <a href="#">
        <h4>Heading</h4>
        <p>This is the paragraph</p>
    </a>
</div>

＆＃13;

您也可以在Codepen上找到此示例：http://codepen.io/Ixillion/pen/ouBrD

在此示例中，段落文本具有正确的链接颜色（绿色）和悬停颜色（红色）。 h4标题没有。
一旦你在css中取出h4声明，它就可以了。不幸的是，这个简单的解决方案在我的项目中是不可能的这是一个css bug还是我做错了什么？非常感谢任何帮助。

Answer 1

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

请尝试以下代码：

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

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

Answer 2

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

悬停不在块级链接中工作

2 个答案: