悬停时使用 CSS 翻译移动 div 但光标保持在先前位置移动

Question

当光标移动到 div 的前一个区域位置时，任何人都可以帮助我在 div 中悬停时创建平移过渡吗？

我试过：

#test {
  border: 1px solid black;
  width: 100px;
  height: 150px;
}

#test:hover {
  transform: translate(300px, 0px);
  transition: all 3s ease;
}

<div id="test">
  Hover me but the cursor always moves in the previous position of the div's area 
</div>

可以看到，当光标移动到div的前一个位置时，div总是平移。但我希望即使光标在前一个区域移动也能停止翻译。谢谢

---

插图：

Answer 1

做一个包装纸，然后用

:hover

代替它（注意是

inline-block

）：

#test {
  border: 1px solid black;
  width: 100px;
  height: 150px;
  transition: all 3s ease;
}

#wrapper {
  display: inline-block;
}

#wrapper:hover > #test {
  transform: translate(300px, 0px);
}

<div id="wrapper">
  <div id="test">
    Hover me but the cursor always moves in the previous position of the div's area
  </div>
</div>

Answer 2

像这样尝试：

#test {
  border: 1px solid black;
  width: 100px;
  height: 150px;
  transition: all 3s ease;
}

#test:hover {
  transform: translate(300px, 0px);
  /* transition: all 3s ease; */
}

<div id="test">
            Hover me but the cursor always moves in the previous position of the div's area 
</div>

Answer 3

onMouseOver 函数是否回答了问题？ 对不起，但我希望它能在某些方面帮助你。

这里如何：

function moveToRight(){
  let myDiv = document.getElementById("test");
  myDiv.style.transform = "translate(300px, 0px)";
  myDiv.style.transition = "all 3s ease";
}

#test {
  border: 1px solid black;
  width: 100px;
  height: 150px;
}

<div id="test" onMouseOver="moveToRight()">
  Hover me but the cursor always moves in the previous position of the div's area 
</div>