在Video.js中，鼠标悬停在视频上时，在哪里可以更改大播放按钮的颜色？

Question

使用 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);
    }

当我将鼠标悬停在按钮本身上时，它会给我一个橙色的大播放按钮。但是我希望当鼠标在到达按钮之前在视频上移动时按钮保持橙色（即，我希望按钮一直保持橙色）。

因此，存在三种情况，其中两种有效，另一种我正在努力工作：

当鼠标完全位于 video.js 播放器区域之外时，大播放按钮具有正确的颜色（由自定义皮肤处理 CSS）。
当鼠标悬停在大播放按钮上时，按钮具有正确的颜色（由上面显示的悬停规则处理）。
当鼠标悬停在 video.js 播放器区域内，但没有直接悬停在大播放按钮上时，按钮具有默认颜色，而不是我想要的颜色。这是我遇到问题的部分。

我需要做什么 change/override 才能确保大播放按钮即使在用户将鼠标悬停在视频上（而不是按钮本身）上时仍保持橙色？谢谢

Answer 1

笔缺少辅助背景颜色和悬停状态样式

$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

在Video.js中，鼠标悬停在视频上时，在哪里可以更改大播放按钮的颜色？

In Video.js, where can I change the big play button color when the mouse is hovering over the video?

javascript

css

video

html5-video

video.js