懸停在父級上不會影響標記標記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;
}