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

Question

如何将父容器(例如 div 或 anchor )的悬停样式应用到标记标签？我知道这是嵌套在像 span 这样的父元素中的其他元素的默认行为。但是，当我使用标记标签时它对我不起作用。

这里有三个例子，1) div with mark, 2) anchor with mark, 3) anchor with span。如果您将鼠标悬停在父级上，但悬停在子级外部，则会更改跨度，但不会更改标记。

<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/

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

注意:我使用的是 Chrome v48。

Answer 1

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

根据 Joseph 的评论

...the default browser/user-agent color for the mark element is set as black

正如默认背景色是yellow一样*.

^{* 这似乎是 Chrome、Firefox 和 IE 的商定默认值，尽管我找不到任何要求来实现这种情况。}

So when you change the parent:hover color, the user agent styling is still more specific. <span> does not have a color set, so it inherits the color specified on 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