CSS悬停在翻译的元素上

Question

动画元素能否检测到实际的鼠标指针位置并以这种方式添加悬停状态？ 在下面的示例中，有一个简单的 div 左右移动，如果您将鼠标悬停在 div 上，它将变为黑色，但是当您将鼠标指针留在动画元素的路径中时，不移动它，悬停状态将不会不能应用。

div{
  width: 100px;
  height: 100px;
  background: red;
  animation: move 1s infinite alternate;
}

div:hover {
  background: black;
}

@keyframes move{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(100px); }
}

<div></div>

反之亦然，当您实际悬停 div 并且不移动鼠标时，即使鼠标指针实际上不再悬停在该元素上，该 div 也会保持黑色。

那么，是否可以根据鼠标指针的静态位置不断切换正常到悬停状态？

Answer 1

使用 translate 无法做到这一点，因为它有一个静态位置。就像 isherwood 所写的那样，翻译后的元素将始终存在于其原始位置。 你可以用绝对定位来做到这一点，你真正移动元素的地方。

div{
  width: 100px;
  height: 100px;
  background: red;
  animation: move 1s infinite alternate;
  position: absolute;
}

div:hover {
  background: black;
}

@keyframes move{
  0%{ left: 0; }
  100%{ left: 100px; }
}

<div></div>