我們對整個網頁編碼的東西有點陌生，目前正在通過 wordpress/elementor 使用自定義 html/css 設定我們自己的 wordpress 頁面（但仍然是免費版本，而不是專業版）。
我們制作了一個視頻自動播放并對懸停滑鼠事件和滑鼠點擊做出反應，但是當我們嘗試使用 .overlay 類在視頻框上放置一個文本覆寫時，覆寫類將覆寫整個視頻，而實際視頻不會對我們的鼠。目標是在視頻上顯示文本，而視頻本身在懸停在視頻上時會繼續播放和暫停。
我們正在使用 Elementor 插件的 HTML 函式。
任何幫助/建議將不勝感激。
這是我們到目前為止所得到的（是的，在編碼方面我們是新手，對于我猜的混亂代碼感到抱歉）：
<style>
.Maus {
cursor: pointer;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: Times New Roman;
font-size: 22pt;
line-height: 22pt;
text-align: center;
}
</style>
<div class=Maus>
<div onmousedown="openInNewTab('https://private.com/video/');">
<video loop="this.play()" onmouseover="this.play()" onmouseout="this.pause();">
<source src="https://private.com/video.mp4" type="video/mp4">
</video>
<div class=overlay>
<p>
lorem ipsum
</p>
</div>
</div>
</div>
<script>
function openInNewTab(url)
{
window.open(url, '_blank').focus();
}
</script>
這是它的截圖：
elementor小部件中帶有文本的視頻檔案
嘗試弄亂 z-index，但失敗了，因為元素與文本重疊，所以它在視頻后面。
uj5u.com熱心網友回復：
您可以添加pointer-events: none;以使元素讓滑鼠操作“通過它”（到它后面的元素）
uj5u.com熱心網友回復：
使用我認為它會幫助你的屬性：
pointer-events: none;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/519386.html
標籤：htmlcss元素
上一篇：網頁抓取Yougov