Hover over parent element

Question

How can I apply a hover style from a parent container, such as a div or anchor, to a tag tag? I know that this is the default behavior for other elements nested inside the parent type. However, it does not work for me when I use the label tag.

Here are three examples: 1) a div with a label, 2) an anchor with a label, 3) an anchor with a span. If you hover over the parent but outside it, it will change the range, 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 like to know what is special about the tag tag, which prevents this from working, and how I can fix it. Otherwise, simple workarounds are welcome.

Note. I am using Chrome v48.

Answer 1

It seems that the color should be specifically set on the mark element, as it is not directly inherited.

For Joseph's comment

... default browser / user agent. default color for mark element is set to black

Same as default background color yellow *.

^{* This means consistent defaults for Chrome, Firefox, and IE, although I can't find any requirements for this.}

So, when you change the parent color: hover the color, the style of the user agent is even more defined. <span> does not have a color set, so it inherits the color specified on the parent: hover

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 requirements, you can add this to your CSS reset.

 mark { color:inherit; } 

Jsfiddle

Answer 2

It depends on how your user agent (browser) styles the <mark> element. Chrome has the following default values:

 background-color: yellow; color: black; 

The easiest way to reset is to add this to your css:

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