css之hover的使用技巧

最新推荐文章于 2024-06-24 16:20:06 发布

一只没有感情的小杀手

最新推荐文章于 2024-06-24 16:20:06 发布

阅读量7.6k

点赞数 12

分类专栏： CSS/CSS3 文章标签： css

本文链接：https://blog.csdn.net/qq_40556950/article/details/103992020

版权

CSS/CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

发现问题：

想实现一个当鼠标放在图片上面时，显示面罩和文字的效果

实现过程：

如果是使用js的话用两个方法就可以了，但是想通过纯css的方式来实现一下，于是就对hover属性进行了尝试。但是很奇怪不起作用，明明单独使用hover的时候都是可以用的。

解决结果

鼠标移入元素，使用 " : hover " 可以改变元素自身的样式（产生新样式）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>hover</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul li{
            width: 300px;
            margin-top: 10px;
            background: #ff0000;
        }

        ul li:hover{
            background: #000000;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

当存在父子关系的时候，可以通过父级的 " : hover " 使得子级的样式发生改变，写法为 " .container:hover .content " ，hover后面有一个空格；但是！子级使用 " : hover " 是改变不了父级的样式的！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>hover</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 300px;
            height: 300px;
            border: 1px solid #ff9f5a;
        }
        .content{
            width: 100px;
            height: 100px;
            background: #27e7ff;
        }
        .container:hover .content{
            background: #000000;
        }
    </style>
</head>
<body>
    <p class="container">
        <p class="content"></p>
    </p>
</body>
</html>

当两个元素不是父子关系，为同胞关系时，通过 " .container:hover .content " 这样的写法是无效的，需要用过 " + " 号，即 " .container:hover + .content " 才能显示出效果！但是要注意两个元素的先后顺序哦！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>hover</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 300px;
            height: 300px;
            border: 1px solid #ff9f5a;
        }
        .content{
            width: 100px;
            height: 100px;
            background: #27e7ff;
        }
        .container:hover +.content{
            background: #000000;
        }

    </style>
</head>
<body>
    <p class="container"></p>
    <p class="content"></p>
</body>
</html>

一只没有感情的小杀手

关注

12
点赞
踩
44

收藏

觉得还不错? 一键收藏
3
评论
css之hover的使用技巧

发现问题：想实现一个当鼠标放在图片上面时，显示面罩和文字的效果实现过程：如果是使用js的话用两个方法就可以了，但是想通过纯css的方式来实现一下，于是就对hover属性进行了尝试。但是很奇怪不起作用，明明单独使用hover的时候都是可以用的。解决结果鼠标移入元素，使用 " : hover " 可以改变元素自身的样式（产生新样式）<!DOCTYPE html>...
复制链接

扫一扫

专栏目录