Question

这是我在这里发表的第一篇文章，如果格式不正确，请道歉。请告诉我如何改进我的问题。

我正在使用Wordpress中的Divi主题为客户建立一个网站。我想在悬停时创建一个自定义叠加层（显示视频标题）。我需要它出现在视频前面，它显示的图像（也是一个叠加层）和播放按钮后面。目前，自定义叠加层位于悬停时播放按钮的顶部，这显然是一个问题，因为该按钮需要是可点击的。

我试图使用z-index属性（确保所有div都已定位），但无济于事。我目前怀疑z-index不起作用的原因是因为我的自定义覆盖overlay-one类正在应用于父div，因此不包含在正确的堆叠上下文中。

为了移动课程，我需要编辑HTML，我不知道如何在Divi中做。通常情况下，我会通过FTP直接进行编辑，但我的客户是那些不想让任何人拥有FTP访问权限的人，甚至是他网站的开发者。所以，如果有一个解决方法并不涉及我通过FTP与我的客户打架，我很高兴知道它。

链接到主页，我正在处理第一个视频＆＃34;欢迎来到摩押＆＃34;：http://finleyholidayproductions.com/home-finley-holiday-productions/

HTML在最顶层的div中显示overlay-one，我假设我需要将其移至包含et_pb_video_overlay的div。

以下是代码：

＆＃13;

.et_pb_video_box {
  position: relative;
  z-index: -1;
}

.et_pb_video_overlay {
  position: absolute;
  z-index: 1;
}

.et_pb_video_play {
  position: absolute;
  z-index: 100;
}

.overlay-one {
  position: absolute;
}

.overlay-one:after {
  position: absolute;
  z-index: 5;
  content: '';
  background: url('http://finleyholidayproductions.com/wp-content/uploads/2017/12/Video-Overlay-Template-Recovered.png');
  background-size: cover;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: .5s ease all;
}

.overlay-one:hover:after {
  opacity: 1;
}

＆＃13;

<div class="et_pb_module et_pb_video overlay-one et_animated et_pb_video_0">
  <div class="et_pb_video_box">
    <iframe src="https://player.vimeo.com/video/230963151" width="1080" height="608" frameborder="0" title="Secrets of the Moab Desert" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
  <div class="et_pb_video_overlay" style="background-image: url(http://finleyholidayproductions.com/wp-content/uploads/2017/12/Thumbnails-1-Secrets-of-the-Moab-Desert.jpg);">
    <div class="et_pb_video_overlay_hover">
      <a href="#" class="et_pb_video_play"></a>
    </div>
  </div>

＆＃13;

总结如此：

我的解决方案是正确的
如何在Divi中编辑HTML以制定此解决方案。

感谢。

Answer 1

如果你坚持不能访问html：

我建议在:after上添加class="et_pb_video_overlay_hover"伪元素。我会把标题放在content:中，如此：

et_pb_video_overlay_hover::after {
    content: "Title";
    ///other css properties to style your title etc.
}

在Divi主题中编辑HTML

1 个答案: