最近要做一個在視頻前面加一個蒙版。然後在視頻上進行一些鼠標操作。
單獨的在視頻上面點擊鼠標，視頻會暫停等等。不想讓這些事件觸發，就在視頻的前面加一個透明的div，然後在這個div上進行鼠標的操作，這樣就能解決問題。
視頻疊加代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div重疊 疊加實例 未排層疊順序</title>
<style>
.div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px}
.div-a{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px}
/* 視頻加載 */
.div-b{ position:absolute; left:80px; top:80px; opacity:0.6; width:300px; height:300px}
/* DIV透明 */
</style>
</head>
<body>
<span style="color:#ff0000;"> <div class="div-relative">
<div <span style="font-size: 13.3333px; font-family: Arial, Helvetica, sans-serif;">id="video" </span><span style="font-size: 12px; font-family: Arial, Helvetica, sans-serif;"> class="div-a">加載視頻</div> </span></span>
<div class="div-b">鼠標事件</div>
</div>
</body>
</html> 最開始我想就直接在這最下面的div上加上視頻，然後把上面的div改爲透明。然並卵！！！！
解決辦法很簡單，在後面的div再嵌一層div。把視頻加載到這個div就可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div重疊 疊加實例 未排層疊順序</title>
<pre name="code" class="html" style="font-size: 13.3333px;"><style>
.div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px}
.div-a{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px}
/* 視頻加載 */
.div-b{ position:absolute; left:80px; top:80px; opacity:0.6; width:300px; height:300px}
/* DIV透明 */
</style>
</head>
<body>
<div class="div-relative">
<div class="div-a">
<div id="video">
加載視頻
</div>
</div>
<div class="div-b">鼠標事件</div>
</div>
</body>
</html>
