Във Video.js, къде мога да променя цвета на големия бутон за възпроизвеждане, когато мишката е над видеото?

Използвайки редактора на кожата по подразбиране video.js (CodePen), успешно промених SCSS $primary-background-color на нюанс на оранжево (по-специално #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