悬停在父级上不会影响标记标记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元素上专门设置，因为它不是直接继承的。

根据约瑟夫的评论

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

就像默认背景颜色是yellow*一样。

^{* 这似乎是 Chrome、Firefox 和 IE 商定的默认设置，尽管我找不到任何要求。}

因此，当您更改parent:hover 颜色时，用户代理样式仍然更加具体。<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;
}

JS小提琴