当我将鼠标悬停在 <picture /> 上时，我试图显示一个透明的封面或 <video /> , 当鼠标离开图片或视频时，再次隐藏封面。
这是我的代码:
$(document).ready(function() {
$('.cspn-show-on-hover').hover(
function() {
$(this).find('.cspn-cover').css('display', 'table-cell');
},
function() {
$(this).find('.cspn-cover').css('display', 'none');
},
);
});.cmedia-box {
position: relative;
display: table;
width: 100%;
max-width: 100%;
height: auto;
}
.cmedia {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cdiv-show-on-hover {
position: absolute;
width: 100%;
height: 100%;
}
.cspn-show-on-hover {
display: table;
position: absolute;
top: 0rem;
left: 0rem;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cspn-cover {
display: none;
vertical-align: middle;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: #6b478fb3;
text-align: center;
margin-bottom: 0rem;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
<video class="cmedia-box" controls>
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>您可能会注意到，当您将鼠标悬停在图像上时，会显示一个透明的紫色封面。但是当我使用 <video />而不是 <picture /> ，封面不再出现!
谁能帮我找出原因？
最佳答案
我认为您正在寻找这样的东西:
<html>
<head>
<style>
div{display:inline-block;}
img,video{height:200px;}
.cover:hover{background:#fff;opacity:0.15;}
</style>
</head>
<body>
<div class="cover">
<picture class="cmedia-box">
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
</div>
<div class="cover">
<video class="cmedia-box" controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
</body>
</html>关于javascript - HTML:在图像和视频上显示透明封面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50109878/