为什么光标在抖动？

Question

我的标记有一个问题，当我这样做时 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;
}

<div class="marker"></div>

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

提前致谢。

Answer 1

抖动是因为您的对象原本大小为 20x20 像素。一旦它成为你的鼠标 :hover，它的尺寸就会缩小。

由于光标没有完全位于对象的中心，它到达了鼠标超出元素边界框的位置，这恢复了它的原始宽度...然后使它变大，鼠标又变大了在边界框内...

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

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

Answer 2

晃动是由于您的元素缩小导致您的光标不再悬停（然后 re-growing 因为您没有悬停，导致您的光标再次改变）

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

.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%);
}

<div class="marker"></div>

为什么光标在抖动？

Why is the cursor shaking?

html

javascript

css

sass