hover伪类注意事项

最新推荐文章于 2022-07-31 17:00:00 发布

CurtainOfNight

最新推荐文章于 2022-07-31 17:00:00 发布

阅读量333

点赞数

分类专栏：前端问题

本文链接：https://blog.csdn.net/CurtainOfNight/article/details/105655559

版权

问题同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

hover伪类

用法一：悬于自身

<!doctype html>
<html lang="en">
<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></title>
    <style>
        #box1 {width: 200px; height: 200px; background: red}
        #box2 {width: 100px; height: 100px; background: blue;}
        #box1:hover {background: #CB5EC6}
    </style>
</head>
<body>
<div id="box1">
<!--    <a href="#">连接</a>-->
<!--    <div id="box2"></div>-->
</div>
</body>
</html>

在这里插入图片描述

用法二：悬于父类作用于子类

<!doctype html>
<html lang="en">
<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></title>
    <style>
        #box1 {width: 200px; height: 200px; background: red}
        #box2 {width: 100px; height: 100px; background: blue;}
        #box1:hover #box2 {background: #CB5EC6}
    </style>
</head>
<body>
<div id="box1">
<!--    <a href="#">连接</a>-->
    <div id="box2"></div>
</div>
</body>
</html>

在这里插入图片描述

注意事项：

只可悬浮于父类作用于子类，不可悬浮于子类作用于父类；
悬浮于同一级，不能作用于同一级；

总结：只可以悬于自身或者悬于父类作用于子类，其他的都不行！！！

CurtainOfNight

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
hover伪类注意事项

hover伪类用法一：悬于自身<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, ini...
复制链接

扫一扫