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元素上专门设置颜色，因为它不是直接继承的。

Per Joseph 的评论

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

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

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

因此，当您更改父级：悬停颜色时，用户代理样式仍然更具体。 <span>没有颜色集，因此它继承了父级：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;
}

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

2 个答案: