CSS过渡变换旋转错误答案

【问题标题】：css transition transform rotate bugCSS过渡变换旋转错误
【发布时间】：2021-03-04 23:08:45
【问题描述】：

我慢慢地将鼠标向下滑动到正方形上，然后在鼠标碰到正方形边缘后正方形开始旋转。鼠标卡在边缘。广场开始震动。我怎样才能解决这个问题？对不起我的英语。

<!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>

enter image description here

【问题讨论】：

标签： css

【解决方案1】：

因为它是一个正方形，当你在里面时，一旦它开始在外面旋转你的边缘。每次强大的老鼠悬停它时，旋转就会打开/关闭。

作为一种解决方法，您可以将其塑造为圆形并在正方形内绘制以避免这种情况：

可能的例子开始

<!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>

【讨论】：

我是这么想的，但我不知道该怎么做。谢谢:)

【解决方案2】：

你会得到这种行为，因为 :hover 检查是在旋转的元素上。因此，当光标位于边缘时，它将来回进入和离开 :hover 状态。然后关键是检查 :hover 在静止的东西上。

我认为您可以旋转子元素并检查其父元素是否悬停。因此，悬停检查不在旋转的内容上。

所以在这种情况下，将其包装在另一个 div 中并检查悬停在那里。

例子

.parent:hover .child {
  width: 200px;
  height: 200px;
  transform: rotate(360deg);
}

通过脚本执行可能更容易，我依稀记得遇到过类似的问题并最终通过 onmouseover 事件解决。

【讨论】：

是的，我同意，使用脚本更简单的方法来解决这个问题。