如何使按钮在悬停时移动到新位置答案

【问题标题】：How to make button move to new position on hover如何使按钮在悬停时移动到新位置
【发布时间】：2026-02-19 11:20:05
【问题描述】：

我希望一个按钮在您将鼠标悬停在它上面时移动到一个新位置并保持在那里。有点像按钮害怕鼠标。最好使用 vanilla JS 和 CSS

button{
  position: absolute;
  top: 10px;
  left: 10px;
}

button:hover{
  left: 200px;
  top: 200x;
}

&lt;button&gt;button&lt;/button&gt;

【问题讨论】：

你的代码有什么问题？
你会在它背后有更多的乐趣/力量。在鼠标悬停时，您可以删除元素，将其插入 HTML 中的其他位置，并使用 CSS 设置所有 div/trap 区域的样式哈哈。
请准确定义行为，即“呆在那里”的条件以及是否只有一个静态 refugium。目前，只要（鼠标）指针悬停在初始位置上，它就会停留在这个单一的替代位置。
按钮不怕。如果悬停时按钮移动到右侧，则不再将鼠标悬停在按钮上，并且按钮会回到开头。因为它发生得太快了，看起来按钮在闪烁。如果你想做到这一点，你必须使用 JavaScript。
solution..... Whisper:: 不过我喜欢 G-Cyrillus 方法....

【解决方案1】：

你可以给一个巨大的过渡延迟，它会看起来像冻结，并且在网页上几乎是永恒的。但只使用过一次，要让按钮四处移动，就需要 javascript。

CSS 示例

button{
  position: absolute;
  top: 10px;
  left: 10px;
  transition:0s 20000s ;
}

button:hover{
  left: 200px;
  top: 200x;
  transition:0s 0s;
}

&lt;button&gt;button&lt;/button&gt;

【讨论】：