active、hover、focus

最新推荐文章于 2024-10-12 12:25:38 发布

绿仔牛奶_

最新推荐文章于 2024-10-12 12:25:38 发布

阅读量1.7k

点赞数 2

分类专栏： Web前端核心技术文章标签： css css3 html

本文链接：https://blog.csdn.net/yuqu1028/article/details/125127426

版权

Web前端核心技术专栏收录该内容

16 篇文章 0 订阅

订阅专栏

伪类

active：元素激活时
使用方法和用在a标签时相同例: div.cd : avtive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试active伪类</title>
<style>
    /* active：点击不放为激活，激活后样式从初始id内设置的改变为active */
    #d1{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }
    #d1:active{
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
    
</style>
</head>
<body>
    <div id="d1"></div>
    <!-- 该实例：激活后将100px正方形变为200px正方形  颜色发生改变 -->
</body>
</html>

focus伪类:对于输入标签有效
代码片:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>focus伪类</title>
    <style>
        #d1{
            border-color:#dee1e6 ;
        }
        #d1:focus{
            border-color: black;
        }
    </style>
</head>
<body>
请输入：<input type="text" id="d1" placeholder="观察边框变化">
    
</body>
</html>

hover伪类：最常用，hover可以为任何元素添加任何属性
这个伪类巨牛逼！！
首先第一个用途与作为锚点伪类是相同的，控制鼠标经过或悬浮时样式的改变
第二个作用：可以控制子元素的样式改变
代码片;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover伪类</title>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            background-color: tomato;
        }
        #d2{
            width: 50px;
            height: 50px;
            background-color: black;
        }
        /* #d1:hover{
            width: 100px;
            height: 100px;
            background-color: red;
        } */
        #d1:hover #d2{
            /* 鼠标悬浮在d1时，触发d2样式发生改变
                用于控制子元素的样式改变 */
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2"></div>
    </div>
    
</body>
</html>