Question

当我将鼠标悬停在<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 />时，封面就不再显示了！任何人都可以帮我确定原因吗？

Answer 1

您需要的只是一个包装器：

＆＃13;

.media-cover {
  display: inline-block;
  position: relative;
}

.media-cover:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #6b478fb3;
  opacity: 0;
}

.media-cover:hover:after {
  opacity: 1;
}

＆＃13;

<div class="media-cover">
  your media object here...
</div>

＆＃13;

以下是以全屏父母为中心的媒体对象的示例：

＆＃13;

.media-cover {
  position: relative;
  display: inline-block;
}
.center-me {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; 
  padding: 0 15%;
  border-bottom: 1px solid #eee;
}
.media-cover:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none; /*delete this line to disable interaction with video/picture */
  background-color: #6b478fb3;
  opacity: 0;
  transition: opacity .2s linear; /*delete this line to disable fade effect */
}
.media-cover video, .media-cover picture, .media-cover img {
  display: block;
  max-width: 100%;
}

.media-cover:hover:after {
  opacity: 1;
}

picture img {
  max-width: 100%;
  display: block;
}
body {margin: 0;}

＆＃13;

<div class="center-me">
  <div class="media-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>
<div class="center-me">
  <div class="media-cover">
    <video class="cmedia-box" controls>
    <source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
  </div>
</div>

＆＃13;

Answer 2

我认为你正在寻找这样的东西：

<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>

Answer 3

视频元素应视为图像，但不能包含不相关的子元素。此外，您应该能够通过使用纯css来制作悬停事件：

.cmedia-box:hover .cspn-cover {
  display: table-cell;
}

我的工作方式如下：

＆＃13;

.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%;
  z-index: 9999;
}

.cspn-show-on-hover {
  display: table;
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.cmedia-box:hover .cspn-cover {
  display: table-cell;
}

.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;
}

＆＃13;

<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>


<div 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>
  <video controls>
  
  <source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>

＆＃13;

HTML：在图片和视频上显示透明封面

3 个答案: