悬停在父级上不会影响标记标记CSS

Question

如何将父容器（如div或锚）中的悬停样式应用于标记标记？ 我知道这是嵌套在父类中的其他元素的默认行为，如span。 但是，当我使用标记标记时，它对我不起作用。

这里有三个例子，1）带有标记的div，2）带有标记的锚，3）带有跨度的锚。 如果您将父项悬停在子项之外，则会更改范围，但不会更改标记。

<div>
  Outside div <mark>inside mark</mark>
</div>

<a>
  Outside anchor <mark>inside mark</mark>
</a>
<br>
<a>
  Outside anchor <span>inside span</span>
</a>

https://jsfiddle.net/ku6drqt5/

我很想知道阻止它工作的标记标记有什么特别之处，以及我如何纠正它。 否则，欢迎简单的解决方法。

注意：我使用的是Chrome v48。

Answer 1

看来颜色必须专门设置在mark元素上，因为它不是直接继承的。

按照约瑟夫的评论

... mark元素的默认浏览器/用户代理color设置为black

正如默认背景颜色为yellow *。

^{*这似乎是Chrome，Firefox和IE的约定默认值，但我找不到任何要求 。}

因此，当您更改父级：悬停颜色时，用户代理样式仍然更具体。 <span>没有颜色集，因此它继承了parent：hover上指定的颜色

解决方法

 .parent:hover { color: red; } .parent:hover mark { color: currentColor; /* or inherit as noted in the other answer */ } 

 <div class="parent"> Outside div <mark>inside mark</mark> </div> <a class="parent"> Outside anchor <mark>inside mark</mark> </a> <br> <a class="parent"> Outside anchor <span>inside span</span> </a> 

---

根据您的要求，您可能希望将其添加到CSS重置中。

mark {
  color:inherit;
}

的jsfiddle

Answer 2

这取决于您的用户代理（浏览器）如何设置<mark>元素的样式。 Chrome有以下默认值：

background-color: yellow;
color: black;

重置此功能的最简单方法是将此添加到您的css：

.parent:hover mark {
    background-color: inherit;
    color: inherit;
}