CSS悬停在翻译元素上

Question

一个动态元素可以检测实际鼠标指针的位置并通过这种方式添加悬停状态吗？ 在下面的示例中，有一个简单的

向左和向右移动，如果您将鼠标悬停在

上，它将变为黑色，但是当您将鼠标指针留在动画元素的路径中而没有移动它时，悬停状态不会应用。

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仍将保持黑色。

因此，是否有可能根据鼠标指针的静态位置不断地在正常状态和悬停状态之间切换？

- prettyInPink

---

翻译后的元素在技术上仍然存在于文档中的原始位置。 - isherwood

在这个主题上可以找到许多类似的问题，比如这个：https://stackoverflow.com/questions/51333507/hovering-on-element-glitches-transform-transition# - isherwood

@isherwood，虽然与上述内容相似，但很可能仍然存在于其原始位置的元素，在这种情况下，它仍然在没有被翻译的位置。但是，如果您等待div向右移动，将鼠标指针添加到左侧（在其原始位置），它仍然不会激活。 - prettyInPink

Answer 1

使用翻译无法做到这一点，因为它具有静态位置。就像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>

- J4R

---

静态位置并不是原因，与“左”、“右”相反的是“translate”。你可以在上面的例子中添加“absolute”，但它仍然不起作用。这是一个很好的解决方法，在提供的简化示例中有效，但“transform”处理的远不止左、右、上、下移动。还是感谢您的建议。 - prettyInPink