我有一个 <a>标记，呈现为一个按钮，我喜欢在悬停时向北移动一个像素。但是，当将鼠标光标定位在底部边缘时，我注意到一个不需要的行为，悬停被触发，并且一旦按钮被重新定位，悬停就不再处于事件状态。只要光标在该位置，就会导致无限重绘循环。它会耗尽我的 CPU。
我明白为什么会这样，但是，我很想找到一些更优雅的解决方案，而不是将它包装在另一个处理悬停的 div 中，而不会自行移动。
有什么想法吗？
编辑:JsFiddle夸张移动 5px。
我试过这些(都触发相同的循环):
- position:relative；顶部:-1px；
- 变换:translateY(-1px);
- 上边距:-1px；底部边距:1px；
- 边框顶部:无； border-bottom: 2px .../* 周围通常为 1px */
Edit2:边界技巧奏效了，但边界框不只移动内容。
最佳答案
不确定我是否正确理解你的问题但是 尝试给你的 div 类按钮并使用下面的代码。 $('.button').on('点击', function(){ $('.button').css('margin-top', '15px'); });
关于javascript - :hover leads to infinite repaint thrashing 上的相对定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25008105/