Блог

Я настраиваю video.js и я добавил дочерний элемент в панель LoadProgressBar для отображения аннотаций. Соответствующий выводимый HTML выглядит следующим образом:

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

Мне удалось успешно изменить стиль vjs-fs-note-text-container-above с помощью следующего правила css:

 .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 — это мой пользовательский файл css, который является рекомендуемым способом настройки video.js .

Проблема в том, что стандартный video js имеет определение стиля, которое увеличивает размер элемента управления ходом выполнения при наведении курсора:

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

Это приводит к увеличению размера добавленного мной дочернего элемента .vjs-fs-note-text-container-above.

Как мне запретить применение стиля к заметке при наведении курсора мыши?

Я попробовал следующее:

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

Однако это ничего не меняет.

Обновлено:

Ни 1em, ни 1rem не работают.. Я также пробовал использовать ключевое слово !important .

Я думаю, мой вопрос в том, каким должен быть селектор, чтобы я мог переопределить правило при наведении курсора ..?

Я также пытался:

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

Для большинства браузеров и элементов HTML font-size значение inherit по умолчанию равно. Это означает, что все font-size значения дочерних элементов будут унаследованы его родительским элементом, а затем каскадом вниз. Если вы не хотите, чтобы он был каскадным, вам нужно будет установить font-size дочерний элемент.

Если ваш дочерний элемент является .vjs-fs-note-text-container-above , установка значения font-size быть 1rem или px (или что бы вы ни хотели) устранит проблему.

Я предлагаю вам попробовать rem модуль для вашей проблемы.

Это em относительная единица измерения… (Читай: процент). Это относительно унаследованного значения (читай: от родительского).

Таким образом, он может оказаться совокупным процентом всех родителей…

Кроме того, установка a 1em для элемента, который унаследовал некоторый родительский процент, ничего не даст. Это все равно, что сказать: «Я хочу, чтобы размер шрифта был на 100% меньше, чем он есть на самом деле».

И rem является единицей относительно «корневого» значения.

Смотрите ниже!

 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> 

Итак… Попробуйте использовать ТОТ ЖЕ селектор, что и тот, который вы хотите переопределить селектор вашего добавленного элемента:

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

Этого тоже может быть достаточно … но вам нужна часть селектора перед :hover , потому что это триггер.

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

Указание размера шрифта в пикселях устранило проблему. Я пробовал как блоки em, так и rem, и проблема не устранялась.

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