我通过 PNG 制作了一个自定义播放按钮，当光标悬停在视频缩略图上时会出现该按钮。但现在视频无法点击。如果我将指针事件设置为无，则不会显示悬停事件。
HTML：
<div class="column">
<div class="videothumbnail">
<a href="https://www.youtube.com/watch?v=MVTQJQQkj4E"><img src="afp_images/photographs/musicvideos/UNTAINTED_THUMBNAIL.jpg" alt=""/></a>
<div class="playbutton"><img src="afp_images/photographs/musicvideos/playbuttonoverlay.png"></div>
</div>
</div>
CSS
.videothumbnail img{
width: 100%;
object-fit: contain;
display: block;
}
.videothumbnail{
overflow: hidden;
position: relative;
}
.videothumbnail img{
transition: transform .3s ease;
}
.videothumbnail:hover img {
transform: scale(1.1);
}
.playbutton{
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.521);
opacity: 0;
transition: .3s;
}
.playbutton:hover{
opacity: 1;
}
我没有在 HTML 中获取播放按钮覆盖层，而是尝试将其作为 CSS 中的背景图像获取，但这也不起作用。帮助将不胜感激。使用原始 CSS 制作一个播放按钮形状并将其覆盖在我的视频链接之上会更好吗？我该怎么办呢？我认为仅使用图像叠加将是最简单的方法。
我没有jquery知识，但我希望没有它也能做到这一点。
您可以在
onclick<div>.videothumbnail img {
width: 100%;
object-fit: contain;
display: block;
}
.videothumbnail {
overflow: hidden;
position: relative;
}
.videothumbnail img {
transition: transform .3s ease;
}
.videothumbnail:hover img {
transform: scale(1.1);
}
.playbutton {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.521);
opacity: 0;
transition: .3s;
}
.playbutton:hover {
opacity: 1;
}<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<div class="column">
<!-- Add onclick function here -->
<div class="videothumbnail" onclick="window.location.href='https://www.youtube.com/watch?v=MVTQJQQkj4E';">
<a href="https://www.youtube.com/watch?v=MVTQJQQkj4E"><img src="https://upload.wikimedia.org/wikipedia/en/2/27/Bliss_%28Windows_XP%29.png" alt="" /></a>
<div class="playbutton"><img src="https://cdn-icons-png.flaticon.com/512/0/375.png"></div>
</div>
</div>
</body>
</html>