將鼠標懸停在父級上不會影響標記標記CSS

如何將父級容器（如div或錨點）的懸停樣式應用於標記標記？我知道這是默認行爲嵌套在像跨度父級內的其他元素。但是，當我使用標記標記時，它不適用於我。將鼠標懸停在父級上不會影響標記標記CSS

以下是三個示例，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。

來源

2016-02-19 kevinrstone

看起來顏色必須專門設置在mark元素上，因爲它不是直接繼承的。

每約瑟夫的評論

...爲mark元素的默認瀏覽器/用戶代理color設置爲black

正如默認背景顏色爲yellow *。

^{*這似乎是Chrome，Firefox和IE的商定默認值，但我無法找到任何要求。}

因此，當您更改父級：懸停顏色時，用戶代理樣式仍然更具體。 <span>沒有顏色設置，所以它繼承於父母指定的顏色：懸停

一種解決方法

.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

來源

2016-02-19 15:15:44

我會以爲這是因爲用戶代理樣式定義的顏色。因此，當您更改父級：懸停顏色時，用戶代理樣式仍然更具體。在用戶代理CSS中沒有設置顏色，所以它繼承了parent：hover指定的顏色。 – Joseph

@Joseph非常感謝......我只是在尋找一個明確的參考資料，但在過渡期間你的是一個很好的解釋。 –

我的假設決不是明確的:-)如果有人想知道，可以在這裏找到最近的用於基於webkit的瀏覽器的用戶代理樣式表：http://trac.webkit.org/browser/trunk/Source/WebCore/css /html.css，它爲元素指定樣式 – Joseph

這取決於如何您的用戶代理（瀏覽器）風格<mark>元素。 Chrome提供了這些默認值：

background-color: yellow; 
color: black;

重置最簡單的方法，就是通過添加這對你的CSS：

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

來源

2016-02-19 15:21:48

將鼠標懸停在父級上不會影響標記標記CSS

回答

相關問題