为什么光标会抖动？答案

【问题标题】：Why is the cursor shaking?为什么光标会抖动？
【发布时间】：2022-02-08 22:53:40
【问题描述】：

我的标记有一个问题，当我执行mouse:hover 时，光标在晃动。

我将组件放入codesandbox，代码与我在应用程序中使用的代码相同。

您可能会注意到，当您将鼠标靠近标记边缘时，光标开始抖动。

.marker {
  transition: all 0.5s ease;
  border: 2px solid #fff;
  background-color: #61ba9e;
  border-radius: 100%;
  width: 20px;
  height: 20px;
}

.marker:hover {
  height: 12.5px;
  width: 12.5px;
  box-shadow: 0 0 0 4px rgb(97 186 158 / 60%);
  cursor: pointer;
}

&lt;div class="marker"&gt;&lt;/div&gt;

我不知道为什么会这样，你能帮帮我吗？

提前致谢。

【问题讨论】：

因为标记的边缘随着圆圈变小而远离手，这导致它与手脱离并导致圆圈变大，从而导致它再次与手接合并变小，等等。
因为标记远离光标缩小，使光标不再悬停，使标记再次变大，使光标再次悬停……
问题是，一旦您将鼠标悬停在边缘，尺寸就会变小，因此光标不再悬停，因此尺寸会变回原样，所以它会再次悬停，然后继续...

标签： javascript html css sass

【解决方案1】：

抖动是由您的元素缩小引起的，因此您的光标不再悬停（然后在您不再悬停时重新增长，导致您的光标再次改变）

与其改变标记的大小，不如使用伪元素，这样你的手就不会“摇晃”，因为它会一直悬停在标记上（但伪元素会改变大小）。

.marker {
  width: 20px;
  height: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.marker:hover {
  cursor: pointer;
}

.marker:after {
  content: '';
  display: block;
  transition: all 0.5s ease;
  border: 2px solid #fff;
  background-color: #61ba9e;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  box-sizing:border-box;
}

.marker:hover:after {
  height: 12.5px;
  width: 12.5px;
  box-shadow: 0 0 0 4px rgb(97 186 158 / 60%);
}

&lt;div class="marker"&gt;&lt;/div&gt;

【讨论】：

我正在将一个带有包装器的解决方案放在一起，但使用伪元素是这里的方法。 +1。

【解决方案2】：

它在晃动，因为您的对象最初的大小为 20x20 像素。一旦你的鼠标:hover 的大小缩小了。

由于光标没有完全集中在对象上，它会到达鼠标超出元素边界框的点，这会恢复它的原始宽度......然后使它变大并且鼠标再次进入元素的内部边界框...

你知道这是怎么回事吗？我们有一个无限循环缩小和扩大元素的边界框。

解决此问题的一个技巧可能是提供一个保持大小为20x20 的包装器，并让标记响应包装器为:hover'ed

【讨论】：