鼠标悬停显示视频播放按钮
时间: 2023-09-11 14:08:09 浏览: 220
这个功能可以通过CSS和JavaScript来实现。首先,在鼠标悬停在视频上时,需要显示一个播放按钮的图标。可以使用CSS中的:hover伪类来实现这个效果。例如:
```
.video-container:hover .play-btn {
display: block;
}
```
这将在视频容器上悬停时,显示.play-btn元素。
接下来,需要在播放按钮上添加一个点击事件,以便启动视频播放。可以使用JavaScript来实现这个功能。例如:
```
const video = document.querySelector('.video-container video');
const playBtn = document.querySelector('.play-btn');
playBtn.addEventListener('click', () => {
video.play();
});
```
这将在点击.play-btn元素时,启动视频播放。你可以根据需要更改选择器和事件处理程序。
阅读全文