これは私の最初の投稿です。何かが間違って書式設定されていると謝ります。私の質問を改善する方法を教えてください。DiviテーマのHTML編集
私はWordpressのDiviテーマを使用してクライアント用のウェブサイトを構築しています。ホバー上に表示するカスタムオーバーレイ（ビデオのタイトルを表示）を作成したいと思います。動画の前に表示する必要があり、画像（オーバーレイも含む）と再生ボタンの後ろに表示されます。現在のところ、カスタムオーバーレイは、ホバー上の再生ボタンの上に位置しています。これは、ボタンがクリック可能でなければならないため、明らかに問題です。
z-indexプロパティ（すべてのdivが配置されていることを確認しています）を使用しようとしましたが、役に立たなくなりました。私は現在、カスタムオーバレイoverlay-oneクラスが親divに適用されているため、適切なスタッキングコンテキストに含まれていないため、Z-インデックスが機能しない理由が考えられます。
クラスを移動するには、Diviで行う方法がわからないHTMLを編集する必要があります。通常、私は直接FTPで編集しますが、私のクライアントは、の誰もがにFTPアクセス権を持ってほしくないようなやや不自由な人の一人です...彼のサイトの開発者さえも。だから、私のクライアントとFTPを使って戦っていないような回避策があるなら、それについて知っていただければ幸いです。
ホームページへのリンク、私は最初のビデオで働いている「モアブへようこそ」：最上位のdivでoverlay-oneを示すhttp://finleyholidayproductions.com/home-finley-holiday-productions/
HTML、私は私が代わりにet_pb_video_overlayを含むdiv要素に移動する必要があると仮定します。
ここではコードです：
.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;
}<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>ので、要約で：
- 私はどのように編集します
- 私の溶液中で正しいだが、 HTML Diviでこの解決法を制定しました。
ありがとうございます。