首页 文章

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

提问于
浏览 次
0

使用video.js默认皮肤编辑器（CodePen），我成功地将SCSS $ primary-background-color更改为橙色阴影（特别是＃f60），生成CSS以给出控制条组件的背景和大玩法按钮变化的橙色 .

这很好用，但是当我将鼠标光标移到视频上时，大播放按钮背景会变为灰蓝色（默认），然后当鼠标悬停在视频上时会变回橙色 . 无论鼠标在哪里，无论何时显示，我都希望大播放按钮保持橙色 .

我在默认皮肤编辑器中的CSS / SCSS中搜索，但当鼠标悬停在视频上时无法看到控制大播放按钮背景颜色的内容 . 我确定我错过了一些东西，或者这可能是在视频.js默认皮肤编辑器中未公开的CSS / SCSS或JS的另一部分中控制的 .

我尝试将以下内容添加到我的CSS中：

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

当我将鼠标悬停在按钮上时，这给了我一个橙色的大按钮 . 但是我希望按钮保持橙色，因为鼠标在到达按钮之前在视频上移动（即，我希望按钮始终保持橙色） .

所以，有三种情况，其中两种是有效的，一种是我正在努力工作的：

  • 当鼠标完全位于video.js播放器区域之外时，大播放按钮的颜色正确（由自定义皮肤CSS处理） .

  • 当鼠标悬停在大播放按钮本身上时，按钮颜色正确（由上面显示的悬停规则处理） .

  • 当鼠标悬停在video.js播放器区域内，但没有直接悬停在大播放按钮上时，该按钮具有默认颜色，而不是我希望它具有的颜色 . 这是我遇到麻烦的部分 .

即使用户将鼠标悬停在视频上（而不是按钮本身），我还需要更改/覆盖以确保大播放按钮保持橙色？谢谢 .

javascript css video html5-video video.js

1 回答

  • 0

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

    $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

    回复于

相关问题