思路及做法:
鼠标移动到父盒子的时候,
里面所有的子盒子的样式都发生变化的,
只需要直接在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;
}
}
}
标签:到父,hover,盒子,样式,color,css,对子,类名
From: https://www.cnblogs.com/xuelinomen/p/16708109.html