最近要做一个在视频前面加一个蒙版。然后在视频上进行一些鼠标操作。
单独的在视频上面点击鼠标，视频会暂停等等。不想让这些事件触发，就在视频的前面加一个透明的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>
965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
