hover的写法

总体来说，可以分为两种写法，这里用一个div举例

代码

 HTML
    <div class="div1">
        <span>测试文字</span>
        <br>
        <a href="">超链接</a>
    </div> 

/*CSS*/
    .div1 {
        position: fixed;
        width: 100px;
        height: 100px;
        text-align: center;
        background-color: pink;
        left: 100px;
        transition: all 0.5s;
    }

    .div1:hover {
        background-color: #e7e7eb;
    }

    a {
       text-decoration: none;
       
       font-size: 18px;
    }
    .div1:hover a {
        color: #f09199;
    } 

    .div1:hover span {
        position: absolute;
        top: 40px;
        color: blue;
    }

方法一：对某个标签添加hover伪类

   .div1:hover {
        background-color: #e7e7eb;
    }

直接对.div1进行添加伪类

方法二：当父标签进行hover时，某个子标签随之变化

    .div1:hover a {
        color: #f09199;
    } 

    .div1:hover span {
        position: absolute;
        top: 40px;
        color: blue;
    }

当类名为div1的div触发了hover时，div内的 a 标签和 span 标签也会有变化