相对定位:悬停导致无限重绘捶打

时间:2014-07-29 04:08:35

标签: javascript css

我有一个<a>标记,呈现为一个按钮,我喜欢在悬停时将像素移动到北方。但是,我注意到在将鼠标光标定位在底部边缘处时出现了不必要的行为,触发了悬停,一旦按钮重新定位,悬停就不再处于活动状态。只要光标位于该位置,这就会导致无限重绘循环。它最大化了我的CPU。

我明白为什么会发生这种情况,但是,我喜欢找到一些更优雅的解决方案,而不是把它包装在处理悬停的另一个div中,而不是移动自己。

有什么想法吗?

编辑:JsFiddle夸张地移动5px。

我已尝试过这些(都触发相同的循环):

  • 职位:亲属;顶部:-1px;
  • transform:translateY(-1px);
  • margin-top:-1px; margin-bottom:1px;
  • border-top:none; border-bottom:2px ... / *通常1px左右* /

Edit2:边框技巧有效,但边界框不会仅移动内容。

1 个答案:

答案 0 :(得分:0)

不确定我是否正确理解你的问题但是 尝试给你的div类按钮并使用以下代码。     $(&#39; .button&#39;)。on(&#39; click&#39;,function(){     $(&#39; .button&#39;)。css(&#39; margin-top&#39;,&#39; 15px&#39;); });