В Video.js, где я могу изменить цвет большой кнопки воспроизведения, когда мышь находится над видео?

Используя редактор скинов по умолчанию video.js (CodePen), я успешно изменил $primary-background-color SCSS на оттенок оранжевого (в частности, #f60), который сгенерировал CSS для создания фона компонентов панели управления и большой игры. кнопки вариации оранжевого цвета.

Это работает нормально, но когда я навожу курсор мыши на видео, фон большой кнопки воспроизведения меняется на серовато-синий (по умолчанию), а затем обратно на оранжевый, когда мышь не находится над видео. Я бы предпочел, чтобы большая кнопка воспроизведения оставалась оранжевой всякий раз, когда она отображается, независимо от того, где находится мышь.

Я поискал в CSS/SCSS в редакторе скинов по умолчанию, но не вижу, что управляет цветом фона большой кнопки воспроизведения, когда мышь находится над видео. Я уверен, что что-то упускаю, или, возможно, это контролируется в другой части CSS/SCSS или JS, которая не отображается в редакторе скинов по умолчанию video.js.

Я попытался добавить следующее в свой CSS:

    .video-js .vjs-big-play-button:hover {
        background-color: rgba(255, 102, 0, 0.7);
    }

и это дает мне большую оранжевую кнопку воспроизведения, когда я нахожусь над самой кнопкой. Но я хотел бы, чтобы кнопка оставалась оранжевой, когда мышь перемещается по видео, прежде чем она доберется до кнопки (т. е. я хочу, чтобы кнопка все время оставалась оранжевой).

Итак, есть три случая, два из которых работают, а один я пытаюсь заставить работать:

  1. Когда мышь находится полностью за пределами области проигрывателя video.js, большая кнопка воспроизведения имеет правильный цвет (обрабатывается пользовательским CSS скина).
  2. Когда мышь находится над самой большой кнопкой воспроизведения, кнопка имеет правильный цвет (обрабатывается правилом наведения, показанным выше).
  3. Когда мышь находится внутри области проигрывателя video.js, но не находится непосредственно над большой кнопкой воспроизведения, кнопка имеет цвет по умолчанию, а не тот цвет, который я хочу. Это та часть, с которой у меня проблемы.

Что мне нужно изменить/переопределить, чтобы большая кнопка воспроизведения оставалась оранжевой, даже когда пользователь наводит указатель мыши на видео (а не на саму кнопку)? Спасибо.


javascript css video video.js html5-video
person kgcode    schedule 10.01.2016    source источник
comment
удаление части селектора :hover не работает? может быть префикс body к селектору, чтобы превзойти внутренний стиль по умолчанию.   -  person dandavis    schedule 11.01.2016
comment
Уже существует CSS, который устанавливает оранжевый цвет большой кнопки воспроизведения без наведения (сгенерированный как часть редактора скинов по умолчанию. Это приводит к тому, что кнопка имеет оранжевый фон, пока мышь не находится где-либо над видео. Как только мышь входит в область видео, однако цвет фона кнопки меняется на цвет по умолчанию.Я добавил правило наведения для обработки случая, когда курсор мыши находится над самой кнопкой, но все еще не может получить оранжевую кнопку, когда мышь находится над видео, но не над кнопкой Добавление тела префикса не повлияло на поведение.   -  person kgcode    schedule 11.01.2016
comment
Я подозреваю, что где-то в CSS/SCSS есть место, где цвет фона большой кнопки воспроизведения меняется на цвет по умолчанию всякий раз, когда мышь наводит курсор на область видео, но я не могу его найти.   -  person kgcode    schedule 11.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

У пера отсутствует вторичный цвет фона и стили состояния наведения.

$secondary-background-color: lighten($primary-background-color, 33%) !default;
.video-js:hover .vjs-control-bar,
.video-js:hover .vjs-big-play-button,
.video-js:hover .vjs-menu-button .vjs-menu-content {
  background-color: $secondary-background-color;
  background-color: rgba($secondary-background-color, 0.7);
}

Вот обновленный codepen.

person misterben    schedule 14.01.2016
comment
Здорово. Это содержит ключевую информацию, которую я искал. В моем CSS я добавил правила, чтобы немного увеличить непрозрачность большой кнопки воспроизведения на .video-js:hover .vjs-big-play-button и сделать большую кнопку воспроизведения полностью непрозрачной на .video-js .vjs-big-play -кнопка: навести. Другими словами, чем ближе пользователь подходит к кнопке, тем более непрозрачной она становится. Прекрасно работает. Спасибо. - person kgcode; 14.01.2016