如何将父容器(例如 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。
最佳答案
似乎必须在 mark
上专门设置颜色元素,因为它不是直接继承的。
根据 Joseph 的评论
...the default browser/user-agent
color
for themark
element is set asblack
正如默认背景色是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;
}
关于html - 悬停在父级上不会影响标记标签 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35508497/