#css#如何使用hover，实现父对子的样式改变？

思路及做法：

鼠标移动到父盒子的时候，

里面所有的子盒子的样式都发生变化的，

只需要直接在hover后面加上空格，

并且加上子盒子的类名 ,里面再写其他样式

.父盒子的类名:hover .子盒子的类名 {

//这里写鼠标移入到父盒子里面，子盒子要发生的样式变化

}

温馨提示，遇到父盒子里面的子盒子过多时，可以采取简写的形式：

以下为简写形式：

<div class="btn">

    点击

    <i class="el-icon-sort"/>

</div>

.btn {

    background: #ccc;

    display: inline-block;

    padding: 8px 15px;

    cursor: pointer;

    &:hover {

        color: blue;

        i {

            color: red;

        }

    }

}