javascript - 在 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);
    }

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

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

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

我需要更改/覆盖什么以确保即使用户将鼠标悬停在视频上(而不是按钮本身)时大播放按钮仍保持橙色？谢谢。

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