CSS hover on translated element

Question

Can an animating element detect the actual mouse pointer position and add a hover state this way? In the below example, there is a simple div moving left and right, if you hover over the div it will become black, however when you leave your mouse pointer in the path of the animating element, without moving it, the hover state won't be applied.

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>

The other way around works the same, when you actually hover the div and don't move your mouse, the div will remain black even if the mouse pointer is not actually hovering this element anymore.

So, is it possible to keep switching normal to hover state based on the static position of the mouse pointer?

Answer 1

it's not possible to do this with translate, because it has a static position. Like isherwood wrote, the translated element will always exist in its original location. You could do this with absolute positioning, where u really move the element.

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>