如下图所示:
主要就是 给遮盖定位 . 但是有一个问题就是 video的高度不是固定的 . 如果 video 和 遮盖 在一个 父级div里, 无法确定位置, 如果用js效果不是很好.
思路: video 和 遮盖不在一个div里:
html:
1 <!-- 默认视频 --> 2 <div class="defaultVideo"> 3 <video controls> 4 <source src="../eypt_uploads/json01.mp4" type="video/mp4"> 5 <source src="movie.ogg" type="video/ogg"> 6 7 </video> 8 </div> 9 <div class="test"> 10 <div class="courseShadow"> 11 <span class="courseShadowCourseName">舞蹈鉴赏</span> 12 <span class="courseShadowTeacher">刘健</span> 13 </div> 14 </div>
设置一个div.test 为 相对定位; div.courseShadow 相对 div.test进行 绝对定位, 这里 的top 取 负值就可以了.
css:
1 .defaultVideo video { 2 width: 100%; 3 /*height: auto;*/ 4 /*border: 1px solid black;*/ 5 } 6 7 8 .test { 9 position: relative; 10 } 11 12 .courseShadow { 13 height: 80px; 14 width: 100%; 15 background-color: #D9D5D2; 16 opacity: 0.7; 17 18 position: absolute; 19 left: 0px; 20 top: -80px; 21 }
注意 : 第 9行 , 和 第20行.
-----------------------------------------------------------------------------------------------------------------------
如果你是这样的html结构, 因为 video的高度自动增长的, 即使使用js ,也很难实现 定位.
1 <!-- 默认视频 --> 2 <div class="defaultVideo"> 3 <video controls> 4 <source src="../eypt_uploads/json01.mp4" type="video/mp4"> 5 <source src="movie.ogg" type="video/ogg"> 6 7 </video> 8 <div class="courseShadow"> 9 <span class="courseShadowCourseName">舞蹈鉴赏</span> 10 <span class="courseShadowTeacher">刘健</span> 11 </div> 12 </div>
-----------------------------------------------------------------------------------------------------------
增加 鼠标移入和 移除事件:
1 /** 2 * [setCourseShadow 设置阴影的 显示 和隐藏] 3 */ 4 function setCourseShadow() 5 { 6 $(".defaultVideo").mouseover(function(){ 7 $(".courseShadow").hide(); 8 }).mouseout(function(){ 9 $(".courseShadow").show(); 10 }); 11 }
注意:这里 使用了 mouseover ,和 mouseout 是因为 这两个事件支持 冒泡 . 也就是说当鼠标 移入 或者 移除 div.defaultVideo 或者 div.defaultVideo的任意子元素,后代元素 时 ,事件都会发生.