李涛自留地
回到顶部
首页 > 前端 > Css实现在图片悬停时显示另外一张图片效果实例

Css实现在图片悬停时显示另外一张图片效果实例

文章目录

有时候我们在前端页面开发的时候，想要达到当我们把鼠标悬停在一张图片上，让另外一张图片（例如一个小图标）显示在这张图片上，这个时候我们应该怎么做呢？其实这种效果在电影网站上使用的比较频繁，主要是鼠标悬停的时候显示出播放的图标，点击图片链接后就会进入视频详情页面，其实使用JavaScript或者是jQuery也能实现，而使用Css却使我们的代码更加简洁。

用Css实现在图片上悬停显示另外一张图片

使用Css实现图片上悬停显示另外一张图片，我们主要会用到绝对定位与相对定位以及Css的伪元素，以下是需要注意的一些要点：

1.需要使用绝对定位和相对定位，确定背景图片的位置,父级盒子设置为绝对定位，伪元素背景图片设置为相对定位。

2.背景图片的宽高要和父级盒子的宽高一致。

3.背景图片在默认情况下不显示，需要用display属性将其设置为none，当鼠标悬停的时候再让其显示出来，鼠标悬停时将其display属性设置为block。

以下是利用绝对定位和相对定位及伪元素给图片在鼠标悬停的时候添加背景图片的详细代码：

鼠标在图片上悬停的时候添加背景图片代码

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #f9f9f9;
        }

        .img {
            position: relative;
            margin: 30px auto;
            width: 260px;
        }

        .img::before {
            content: '';
            display: none;
            position: absolute;
            height: 100%;
            width: 100%;
            background: rgba(0, 0, 0, .2) url("img/play.png") no-repeat center;
        }

        .img img {
            width: 100%;
            height: auto;
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
        }

        .img:hover::before {
            display: block;
        }
    </style>
</head>

<body>
    <div class="img">
        <img src="img/11.jpg" alt="">
    </div>
</body>

</html>
Css实现在图片悬停时显示另外一张图片效果实例

在以上实例中，当我们鼠标悬停在图片上后，就会显示出隐藏的播放小图标。主要是我们使用了Css的图片伪元素before先不让背景图片小图标显示和使用相对定位让图片定位到图片正中间位置上，并使用rgba设置背景色为黑色的0.2个透明度；当我们鼠标滑过图片的时候，则让img:hover::before显示即可。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。