Css实现鼠标滑过文字时显示隐藏的图片

最新推荐文章于 2021-06-03 21:47:34 发布

Web-Jason365

最新推荐文章于 2021-06-03 21:47:34 发布

阅读量8.8k

点赞数 9

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/Web_Jason365/article/details/108190609

版权

前端学习专栏收录该内容

12 篇文章 1 订阅

订阅专栏

今日在防站过程中，看到目标站有鼠标滑过文字时显示隐藏的图片这种效果，第一感觉是通过JS来实现的，但百度一下找到了完全用Css来实现的方法。

具体步骤如下：

1、鼠标滑过的文字与图片必须是在一个容器内，并且是容器盒子内相邻的元素。

2、需要将图片先进行隐藏。

3、设置文字滑过时hover+图片样式才让图片显示出来。

分享记录一下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS实现鼠标滑过文字时显示隐藏的图片</title>
    <style>
        /*清除浏览器自带默认样式*/
        * {
            margin: 0;
            padding: 0;
        }
        /*设置容器盒子宽高及内边距*/
        .text-hover {
            width: 40rem;
            height: 20rem;
            padding: 2rem 10rem;
        }
        /*设置图片自适应及不显示的样式*/
        .img-hover {
            width: 100%;
            height: aotu;
            padding: 2rem 0;
            display: none;
        }
        /*设置h2文字鼠标滑过的样式*/
        h2:hover{
            color: red;
        }
        /*设置鼠标滑过h2标签的文字时显示图片*/
        h2:hover + .img-hover {
            display: block;
        }
    </style>
</head>
<body>
<div class="text-hover">
    <h2>慢慢看漫画</h2>
    <img src="flash/1.jpg" class="img-hover" alt="">
</div>
</body>
</html>

Web-Jason365

关注

9
点赞
踩
48

收藏

觉得还不错? 一键收藏
0
评论
Css实现鼠标滑过文字时显示隐藏的图片

今日在防站过程中，看到目标站有鼠标滑过文字时显示隐藏的图片这种效果，第一感觉是通过JS来实现的，但百度一下找到了完全用Css来实现的方法。具体步骤如下：1、鼠标滑过的文字与图片必须是在一个容器内，并且是容器盒子内相邻的元素。2、需要将图片先进行隐藏。3、设置文字滑过时hover+图片样式才让图片显示出来。分享记录一下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="U
复制链接

扫一扫