Hover on parent does not affect mark tag CSS

Question

How can I apply hover style from a parent container, such as div or anchor, to a mark tag? I know this is default behavior for other elements nested inside a parent like span. However, it is not working for me when I use a mark tag.

Here are three examples, 1) div with mark, 2) anchor with mark, 3) anchor with span. If you hover the parent, but outside the child, it changes the span, but not the mark.

<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/

I would love to know what is special about the mark tag that is preventing this from working, and how I might correct it. Otherwise, simple workarounds are welcome.

Note: I am using Chrome v48.

Answer 1

It appears that the color has to be specifically set on a mark element as it's not directly inherited.

Per Joseph 's comment

...the default browser/user-agent color for the mark element is set as black

Just as the default background color is yellow *.

^{* this appears be the agreed defaults for Chrome, Firefox and IE although I cannot locate any requirement for this to be the case.}

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

A workaround

 .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> 

---

Depending on your requirement you might like to add this to your CSS reset.

mark {
  color:inherit;
}

JSfiddle

Answer 2

This depends on how your user agent (browser) styles the <mark> element. Chrome has these defaults:

background-color: yellow;
color: black;

The easiest way to reset this, is through adding this to your css:

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