我的理解请老师看一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.father{
width: 400px;
height: 400px;
margin: 0 auto;
}
.father:hover{
will-change: width;
}
.child{
width: 100px;
height: 100px;
margin: o auto;
background-color: yellow;
transition: 2s ease-in-out;
}
.child:hover{
width: 300px;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>在这里给father的hover伪元素添加will-change通知浏览器要执行GPU加速，因为在father和child之间有一段距离，所以能留给浏览器准备加速的时间，而在child子元素需要加速时，GPU已经准备好优化动画了，当移出father时，will-change属性也会消失，把内存还给了浏览器。
22
收起
正在回答
2回答
@ZZZZZzn同学你好，因为hover中的样式只有在鼠标移入时生效， 放在hover中是为了鼠标移出时，就移除这个样式。
祝学习愉快 ~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星