我慢慢地将鼠标在正方形上向下滑动，然后在鼠标碰到正方形的边缘后，正方形开始旋转。鼠标卡在边缘。广场开始震动。如何解决这个问题？我为我的英语感到抱歉。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 1s, height 1s, transform 1s;
}
div:hover {
width: 200px;
height: 200px;
transform: rotate(360deg);
}
</style>
</head>
<body>
<br>
<div>
<p>Hover</p>
</div>
</body>
</html>在此处输入图像描述
因为它是一个正方形，当你在边缘内侧时，它一开始就在外侧旋转。每当强大的老鼠在它周围徘徊时，旋转就开始/停止。
作为一种变通方法，你可以将其塑造成圆形，并在正方形内绘制以避免这种情况：
从开始的可能示例
<!DOCTYPE html>
<html>
<head>
<style>
div {
box-sizing:border-box;
width: 150px;
height: 150px;
padding:25px;
margin:-20px 0 0 -20px;
border-radius:50%;
/* background color rgba(0,0,0,0.001) added so it is not totaly transparent and can catch the hover some browsers might need it ... */
background: linear-gradient(red,red) rgba(0,0,0,0.001) center center/ 70% 70% no-repeat;
transition: 1s;
}
div:hover {
width: 250px;
height: 250px;
padding:50px;
margin:-35px 0 0 -35px;
transform: rotate(360deg);
}
</style>
</head>
<body>
<br>
<div>
<p>Hover</p>
</div>
</body>
</html>您会得到这种行为，因为：悬停检查是在旋转的元素上。因此，当光标位于边缘时，它将前后进入和离开：悬停状态。关键是要检查：将鼠标悬停在静止的物体上。
我认为你可以旋转一个子元素并检查悬停在其父元素上。所以悬停检查不在旋转的物体上。
因此，在本例中，将其包装在另一个div中，并在那里检查悬停。
示例
.parent:hover .child {
width: 200px;
height: 200px;
transform: rotate(360deg);
}
通过脚本执行可能更容易，我隐约记得以前遇到过类似的问题，最终通过onmouseover事件解决了这个问题。