CSS 将鼠标悬停在已翻译的元素上-解网

问：

动画元素能否检测实际的鼠标指针位置并以这种方式添加悬停状态？在下面的示例中，有一个简单的 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 也将保持黑色。

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

html css css动画

@isherwood，虽然它与上述类似，并且很可能该元素在技术上仍然存在于其原始位置，在这种情况下，它将在不被平移的情况下位于该位置，但是如果您等待 div 向右移动，将鼠标指针添加到左侧（在其原始位置），它仍然不会激活。

答：

2赞 J4R 6/5/2021 #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>

CSS 将鼠标悬停在已翻译的元素上

CSS hover on translated element

评论

评论