How to prevent this child element from inheriting hover css?

Question

I am customizing video.js and I have added a child element to the LoadProgressBar to show annotations. The relevant outputted HTML is as follows:

<div class="vjs-progress-control vjs-control">
    <div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="0.00" aria-valuemin="0" aria-valuemax="100" aria-label="Progress Bar" aria-valuetext="0:00 of 0:30">
        <div class="vjs-load-progress" style="width: 100%;">
             <div class="vjs-fs-note vjs-control vjs-button" tabindex="0" role="button" aria-disabled="false" style="margin-left:49%">
                 <span aria-hidden="true" class="vjs-icon-placeholder"></span>
                 <span class="vjs-control-text" aria-live="polite"></span>
                 <div class="vjs-fs-note-text-container-above">        
                    <span>Adding a test note</span>
                 </div>
             </div>

I have been successfully able to style the vjs-fs-note-text-container-above with the following css rule:

.vjs-matrix.video-js .vjs-progress-holder .vjs-load-progress div.vjs-fs-note > div.vjs-fs-note-text-container-above {
    background-color: white;
    z-index: 20;
    min-width: 100px;
    width: fit-content;
    border: 1px solid #aaa;
    border-radius: 5px;
    position: relative;
    top:-80px;
    height: fit-content;
    padding: 7px;
    color: black;
}

.vjs-matrix is my custom css file, which is the recommended way to customize video.js.

The issue is that the default video js has a style definition which increases the size of the progress-control on hover:

// This increases the size of the progress holder so there is an increased
// hit area for clicks/touches.
.video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1.666666666666666666em;
}

https://github.com/videojs/video.js/blob/main/src/css/components/_progress.scss#L46

This ends up increasing the size of the child element I added .vjs-fs-note-text-container-above.

How do I stop the style from being applied to the note on hover?

I have tried the following:

.vjs-matrix.video-js .vjs-progress-holder .vjs-load-progress div.vjs-fs-note > div.vjs-fs-note-text-container-above:hover { font-size:1em !important; }

However this does not change anything.

Updated:

Neither 1em nor 1rem works.. I have tried with the !important keyword as well.

I guess my question is what should be the selector so that I am able to override the rule on hover..?

I also tried:

.vjs-matrix.video-js .vjs-progress-holder:hover .vjs-load-progress div.vjs-fs-note > div.vjs-fs-note-text-container-above { font-size:1em/rem !important; }

Answer 1

Specifying the font-size in pixels fixed the issue. I tried both em and rem units and the issue persisted.

.vjs-matrix .vjs-progress-control:hover .vjs-progress-holder .vjs-load-progress div.vjs-fs-note > div.vjs-fs-note-text-container-above {
   font-size: 10px;
}

Answer 2

I suggest you to try the rem unit for your issue.

The em is a relative unit... (Read: a percentage). It is relative to the inherited value (read: from the parent).

So it may ending up as the cumulative percentages of all the parents...

Also, setting a 1em to an element that has inherited some parent's percentage will do nothing. It is like saying "I want the font-size 100% of what it actually is".

And rem is a unit relative to the "root" value.

See below!

div{
  border: 1px solid black;
  margin: 20px;
}
p{
  margin: 0;
}
#grandparent{
  font-size:2em;
}
#parent{
  font-size:2em;
}
#element1{
  font-size: 1rem; /* Notice the effect of that one */
}
#element2{
  font-size: 1em; /* versus that one */
}

<p>Text</p>
<div id="grandparent">
  <p>Text</p>
  <div id="parent">
    <p>Text</p>
    <div id="element1">
      <p>Text</p>
    </div>
    <div id="element2">
      <p>Text</p>
    </div>
  </div>
</div>

So... Try using the SAME selector as the one you whish to override + the selector of your added element:

.video-js .vjs-progress-control:hover .vjs-progress-holder .vjs-fs-note-text-container-above{
  font-size: 1rem;
}

This may be enought too... but you need the part of the selector before the :hover because that is the trigger.

.video-js .vjs-progress-control:hover .vjs-fs-note-text-container-above{
  font-size: 1rem;
}

Answer 3

For most browsers and HTML elements, the font-size value is set to inherit by default. This means all child elements font-size value will be inherited by it's parent, then cascade down. If you don't want it to cascade you will need to set the font-size of the child element.

If your child element is .vjs-fs-note-text-container-above, setting the font-size to be 1rem or px (or whatever you want) will fix the issue.