Question

我有视频容器，如下所示： screenshot1

HTML：

  <div class="video-item col-xs-6 col-md-4">
      <div class="opacity-layer"></div>
      <div class="play-block">
          <div class="landing-play-button"></div>
      </div>
      <img src="image.jpg">
  </div>

CSS：

.opacity-layer{
    position: absolute;
    background-color: white;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.play-block{
    position: absolute;
    width: 90%;
    height: 55%;
    border: solid white 4px;
    margin: 5% 5%;
    opacity: 0.5;
    /*background-color: #f5f5f5;*/
    cursor: pointer;
}

.play-block:hover{
    background-color: transparent;
}

和“悬停”我想在'play-block'中删除'opacity-layer'，如下所示：screenshot2。

Answer 1

使用：

.play-block:hover {
    background-color: transparent;
    opacity:1;
}

Answer 2

如果您希望不透明层在:hover上不可见，那么我建议最简单的方法：

.video-item:hover .opacity-layer {
  opacity: 0;
}

这会解决问题吗？

编辑：这是一个想法：

<div class="video-item col-xs-6 col-md-4">
  <div class="play-block">
      <div class="covers-only-play-block">
          <div class="landing-play-button"></div>
      </div>
  </div>
  <img src="image.jpg">
</div>

使用以下CSS：

.covers-only-play-block {
  position: relative;
  z-index: 1; /* 1 is a placeholder, it needs to be lower than the one for the play button, though */
  background: #fff;
  opacity: .5;
}
.video-item:hover .covers-only-play-block {
  opacity: 0;
}

Answer 3

尝试使用多个borders或outline，然后淡出ackground-color上的b hover。我在此示例中使用了outline - https://jsfiddle.net/ea90qjae/

现在它意味着已经完成的解决方案，但是它应该为你提供10个启动器

为'悬停'效果创建标记

3 个答案: