Как запретить этому дочернему элементу наследовать hover css?
Я настраиваю 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-выше с помощью следующего правила 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.
Проблема в том, что видео 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-выше.
Как остановить применение стиля к заметке при наведении?
Я пробовал следующее:
.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; }
Ответы 3
Для большинства браузеров и HTML-элементов значение font-size по умолчанию установлено на inherit. Это означает, что все значения дочерних элементов font-size будут унаследованы родительским элементом, а затем каскадом вниз. Если вы не хотите, чтобы он каскадировался, вам нужно будет установить font-size дочернего элемента.
Если вашим дочерним элементом является .vjs-fs-note-text-container-above, установка font-size на 1rem или px (или что вы хотите) решит проблему.
Я предлагаю вам попробовать модуль rem для вашей проблемы.
em - это относительная единица... (читай: процент). Это относительно унаследованного значения (читай: от родителя).
Так что это может закончиться как совокупный процент всех родителей...
Кроме того, установка 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;
}
Попробуйте
font-size:1rem !important;Гдеem— процент от унаследованного размера шрифта, аrem— процент от «корневого» размера шрифта.