hover时出现蒙版暂停播放效果

来源：互联网发布：华为mate8 软件编辑：程序博客网时间：2024/05/22 13:32

[原文链接]http://blog.csdn.net/wx11408115/article/details/52799932

工作时遇到给视频缩略图加上hover效果，在网上找效果一直没有找到满意的，于是就自己写了个，不需要用z-index. 直接在没hover时设置为透明，hover就写透明度。
hover时出现蒙版暂停播放效果

<!DOCTYPE html><html><head>    <title>hover时出现蒙版暂停播放效果</title>    <meta charset="utf-8">    <style type="text/css">        #container {            width: 600px;            height: 440px;            border: 1px solid #0f0;            margin: auto;        }        .div_img {            float: left;            height: 200px;            padding: 10px;            width: 180px;        }        div img {            width: 100%;            height: 100%;        }        .mask {            width: 180px;            height: 200px;            position: absolute;            opacity: 0;        }        .mask:hover {            position: absolute;            opacity: 0.8;        }    </style></head><body>    <div id="container">        <div class="div_img">            <img class="mask" src="./images/play.png">            <img src="./images/1.jpg">        </div>        <div class="div_img">            <img class="mask" src="./images/play.png">            <img src="./images/2.jpg">        </div>        <div class="div_img">            <img class="mask" src="./images/play.png">            <img src="./images/3.jpg">        </div>        <hr>        <div class="div_img">            <img class="mask" src="./images/play.png">            <img src="./images/4.jpg">        </div>        <div class="div_img">            <img class="mask" src="./images/play.png">            <img src="./images/5.jpg">        </div>        <div class="div_img">            <img class="mask" src="./images/play.png">            <img src="./images/3.jpg">        </div>    </div></body></html>

顺便记几个小细节
1. 用hover需要的注意的地方
#left_aside span:hover, #right_aside li:hover {
background-color: #77B6F6;
}
1. 冒号前后无空格
2. 多个hover得分开写，而不是 E1, E2:hover{}
2. line-height 和height设置一样可以上下居中
3. js代码中设置debugger; 也是打断点
13. ul li 设置 li无点点：
对 li 设置 list-style-style: none;
若想把点点放在li 里，则: list-style-position: inside;
12. 对一行文字过多，显示省略号css代码

        overflow: hidden;            text-overflow: ellipsis;            white-space: nowrap;

原文链接 http://blog.csdn.net/wx11408115/article/details/52799932

0 0