Скрыть A :: Перед наложением, когда атрибут родителя меняется, после решения репутации псевдоэлемента. ⇐ CSS

[Anonymous]

Я разрабатываю пользовательскую таблицу стилей пользователя для YouTube, чтобы добавить «просмотр» наложений на видео-миниатюр. /> Желаемый опыт работы с конечным пользователем: пользователь видит текст «Смотреть» на миниатюре. Когда они зависают над этим, текст исчезает, и предварительный просмотр видео начинает играть без какой -либо визуальной обструкции. Первоначальный парижок правильно скрывает его, но как только видео начнет воспроизводить, наложение возвращается, охватывая предварительный просмотр. Похоже, это проблема управления государством CSS, в которой начальное состояние: состояние падения теряется, как только видеоплеер становится активным элементом. Первоначальная версия моего сценария пострадала от дублирующей ошибки наложения. Это было вызвано внутренним конфликтом между двумя разными наборами селекторов в рамках моей собственной таблицы стилей: унаследованное правило, разработанное для более старых макетов YouTube (например, история или понравившиеся страницы видео). Современное правило, которое я написал для обработки более новых макетов сетки (например, домашней страницы). Проблема заключалась в том, что на определенных страницах (в частности, подписки на подачу) структура HTML была гибридом, который запускал оба правила одновременно, что привело к тому, что два наложения будут представлены. Мое решение состояло в том, чтобы реорганизовать мой код и объединить логику в одно единое правило, в котором используется ytd-grid-video-Renderer: HAS (#Progress). Это успешно устранило ошибку дублирования на всех страницах. Тем не менее, этот рефакторинг - это то, что приводило непосредственно к текущей, более тонкой проблеме прокачки/предварительного просмотра, которую я сейчас пытаюсь решить. Мой процесс отладки уже решил начальную ошибку с дублирующими наложениями, консолидируя мою логику создания в одно, надежное правило. Теперь я сосредоточен на этой последней проблеме прокачки.ytd-grid-video-renderer:hover #thumbnail::before {
opacity: 0;
}
< /code>
Что я ожидал: я ожидал, что наложение «Смотреть» оставалось скрытым на протяжении всей продолжительности наказания мыши. Состояние: состояние нарыва явно теряется или прерывается с помощью JavaScript Youtube, что делает этот метод ненадежным.
Попытка 2: использование более стабильного селектора [атрибут]
То, что я попробовал: я использовал инфектор моего браузера и обнаружил, что когда видео-предварительный сценарий-это код-фар-код-фрип-фар. Атрибут к основному ytd-grid-video-renderer родительскому контейнеру. Это казалось идеальным, стабильным триггером. Я попытался нацеливаться напрямую: < /p>
ytd-grid-video-renderer[is-mouse-over-for-preview] #thumbnail::before {
opacity: 0 !important;
}
< /code>
Что я ожидал: я ожидал, что это будет надежное решение. Всякий раз, когда атрибут присутствовал на родителе, непрозрачность моего наложения должна быть вынуждена 0. < /p>
, что на самом деле привело: селектор вообще не имеет никакого эффекта. Стиль никогда не применяется, даже когда я ясно вижу атрибут IS-Mouse-Over-For-Preview на элементе YTD-Grid-video-Renderer в живом инспекторе. В консоли нет сообщений об ошибках; Правило просто игнорируется. < /p>
минимальный воспроизводимый пример < /h2>
Поскольку эта проблема зависит от динамического JavaScript на стороне клиента, полностью выполняемый автономный пример невозможна. Тем не менее, ниже приводится точное, минимальное представление соответствующей структуры HTML и вовлеченных правил CSS, что четко демонстрирует проблему.






< /code>
Это состояние родительского элемента во время предварительного просмотра видео. < /p>







< /code>
Соответствующий код CSS: < /h3>
/* This rule correctly creates the overlay using the presence of #progress as a trigger.
This part of the logic is working as intended. */
ytd-grid-video-renderer:has(#progress) #thumbnail::before {
content: 'WATCHED';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
pointer-events: none;
opacity: 1;
transition: opacity 0.2s ease-in-out;
background: rgba(0, 0, 0, 0.7);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}

/* This is the rule that I expect to work, but it fails to apply. */
ytd-grid-video-renderer[is-mouse-over-for-preview] #thumbnail::before {
opacity: 0 !important;
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... ng-a-dupli