给视频加上 遮盖层, 移入隐藏, 移开 显示遮盖 ;;; 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的任意子元素,后代元素 时 ,事件都会发生.