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

最新推荐文章于 2024-08-05 18:19:21 发布

WiFi_Uncle

最新推荐文章于 2024-08-05 18:19:21 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： html/html5 css 文章标签： html css

本文链接：https://blog.youkuaiyun.com/wx11408115/article/details/52799932

html/html5 同时被 2 个专栏收录

13 篇文章

订阅专栏

css

11 篇文章

订阅专栏

本文介绍了一种在视频缩略图上实现hover效果的方法，通过设置透明度变化来达到显示蒙版的目的，无需使用z-index。同时分享了一些CSS技巧，如line-height与height设置以实现上下居中等。

[原文链接]http://blog.youkuaiyun.com/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.youkuaiyun.com/wx11408115/article/details/52799932