制作一个 Package 器，然后在其上使用: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>

如图所示，我们可以使用一个保持在先前位置的方框，这个方框可以是一个实际的元素（如the #wrapper in InSync's answer），也可以是一个伪元素。
使用伪元素的初始问题是：因为它是一个子对象，所以自然会跟随它的翻译父对象。
要使它“停留在原地”，我们需要伪元素，例如平移到相反的方向：

#test {position: relative} /*Non-`static` position required for `absolute`.*/
#test::before {
  content: "";
  
  /*Make similar size to parent and place on top:*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  opacity: .6;
  background-color: lightblue;
}
#test:hover::before {
  /*Translate opposite on hover*/
  transform: translate(-300px, 0);
  transition: transform 3s ease;
}

/*Your CSS:*/
#test {
  border: 1px solid black;
  width: 100px;
  height: 150px;
}
#test:hover {
  transform: translate(300px, 0px);
  transition: transform 3s ease;
}

<div id="test">
  Hover me but the cursor always moves in the previous position of the div's area <button onclick="console.log('Pressed')">Press</button>
</div>

注意伪元素是如何被放置在其他内容的前面的，这是因为position: absolute，这会阻碍实际内容接收指针事件。
但是我们可以使用z-index property将其放在其他内容之后。
通过在伪元素上声明z-index: -1，它将被放在后面，不幸的是，它也将被放在同一个stacking context中的 any ancestor 后面：
一个二个一个一个
CSS转换模块级别1规范如下：
对于其布局由CSS框模型控制的元素，transform属性的none以外的任何值都将导致创建堆叠上下文。
简单地说：幸运的是伪元素在需要的时候就在它应该在的地方;当#test在平移时。
或者，我们可以通过在#test上声明z-index: 0来建立一个始终存在的新堆栈上下文。

#test {z-index: 0}

/*Previous CSS:*/
#ancestor {background-color: lightpink}
#test::before {z-index: -1}

#test {position: relative}
#test::before {
  content: "";
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background-color: lightblue;
}
#test:hover::before {
  transform: translate(-300px, 0);
  transition: transform 3s ease;
}

#test {
  border: 1px solid black;
  width: 100px;
  height: 150px;
}
#test:hover {
  transform: translate(300px, 0px);
  transition: transform 3s ease;
}

<div id="ancestor">
  <div id="test">
    Hover me but the cursor always moves in the previous position of the div's area <button onclick="console.log('Pressed')">Press</button>
  </div>
</div>

注意：伪元素仍然放置在#test的框前面，所以它仍然会遮挡#test的背景。由于伪元素是透明的，所以这应该不是问题。

如果你想在不悬停时也应用转换，只需在#test上声明它（而不是在#test:hover上）：

#ancestor {background-color: lightpink}

#test {
  z-index: 0;
  position: relative;
  border: 1px solid black;
  width: 100px;
  height: 150px;
  transition: transform 3s ease;
}
#test:hover {
  transform: translate(300px, 0px);
}

#test::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: lightblue;
  transition: transform 3s ease;
}
#test:hover::before {
  transform: translate(-300px, 0);
}

<div id="ancestor">
  <div id="test">
    Hover me but the cursor always moves in the previous position of the div's area <button onclick="console.log('Pressed')">Press</button>
  </div>
</div>

注意：不要忘记在不悬停时也转换伪元素！

试着这样做：

#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>

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>