给视频加上 遮盖层, 移入隐藏, 移开 显示遮盖 ;;; mouseover ,和 mouseout

如下图所示:

主要就是 给遮盖定位 .  但是有一个问题就是 video的高度不是固定的 . 如果 video 和 遮盖 在一个 父级div里, 无法确定位置, 如果用js效果不是很好.

思路:  video 和 遮盖不在一个div里:

html:

             <!-- 默认视频 -->
             <div class="defaultVideo">
                 <video controls>
                     <source src="../eypt_uploads/json01.mp4" type="video/mp4">
                     <source src="movie.ogg" type="video/ogg">

                 </video>
             </div>
             <div class="test">
                 <div class="courseShadow">
                     <span class="courseShadowCourseName">舞蹈鉴赏</span>
                     <span class="courseShadowTeacher">刘健</span>
                 </div>
             </div>

设置一个div.test 为 相对定位;  div.courseShadow 相对 div.test进行 绝对定位, 这里 的top 取 负值就可以了.

css:

     .defaultVideo video {
         width: 100%;
         /*height: auto;*/
         /*border: 1px solid black;*/
     }

     .test {
 9         position: relative;
     }

     .courseShadow {
         height: 80px;
         width: 100%;
         background-color: #D9D5D2;
         opacity: 0.7;

         position: absolute;
         left: 0px;
20         top: -80px;
     }

注意 : 第 9行 , 和 第20行.

-----------------------------------------------------------------------------------------------------------------------

如果你是这样的html结构, 因为 video的高度自动增长的, 即使使用js ,也很难实现 定位.

             <!-- 默认视频 -->
             <div class="defaultVideo">
                 <video controls>
                     <source src="../eypt_uploads/json01.mp4" type="video/mp4">
                     <source src="movie.ogg" type="video/ogg">

                 </video>
                 <div class="courseShadow">
                     <span class="courseShadowCourseName">舞蹈鉴赏</span>
                     <span class="courseShadowTeacher">刘健</span>
                 </div>
             </div>

-----------------------------------------------------------------------------------------------------------

增加 鼠标移入和 移除事件:

     /**
      * [setCourseShadow 设置阴影的 显示 和隐藏]
      */
     function setCourseShadow()
     {
         $(".defaultVideo").mouseover(function(){
             $(".courseShadow").hide();
         }).mouseout(function(){
             $(".courseShadow").show();
         });
     }

注意:这里 使用了 mouseover ,和 mouseout 是因为 这两个事件支持 冒泡 . 也就是说当鼠标 移入 或者 移除 div.defaultVideo 或者 div.defaultVideo的任意子元素,后代元素 时 ,事件都会发生.