鼠标hover时改变图片透明度和颜色

最新推荐文章于 2024-04-19 15:57:51 发布

转载最新推荐文章于 2024-04-19 15:57:51 发布 · 800 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/iriliguo/p/6477401.html

本文介绍了一个使用CSS实现的鼠标悬停效果案例。当鼠标悬停在一个包含图片的区域上时，图片下方会显示一个透明背景层及文字图标，增强了用户交互体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标hover时改变图片透明度和颜色</title>
    <style>
        * {
            margin:0;
        padding: 0;
        }

        .wrap{
            border: 1px solid pink;
            width: 300px;
            height:250px;
            position: relative;
            overflow: hidden;
        }
        .pic,.bac {
            width: 300px;
            height:250px;
            position: absolute;
        }
.bac {
    background: pink;
    opacity: 0.6;
    display: none;
}
        img {
            width: 300px;
            height:250px;
        }
        .wrap:hover .bac{
           display: block;
        }
        .wrap:hover .txt{
            display: block;
        }
        .txt {
font-size: 40px;
            position: absolute;
            text-align: center;
            left: 50%;
            top:30%;
            color:orangered;
            display: none;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="pic">
        <img src="img/1.png">
    </div>
    <div class="bac"></div>
    <div class="txt">+</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/iriliguo/p/6477401.html