Question

我在徘徊按钮时遇到了麻烦。当鼠标没有完全超过按钮时，它们似乎会摇晃。

我做了一个JSFiddle所以你可以看到我的意思： http://jsfiddle.net/h93jkxck/

我试图给它一个min-height，但它还在摇晃。

Answer 1

因为它们在悬停时改变了它们的位置，所以实际上它们不再徘徊......它看起来像是在“摇晃”

试试这个：

.btn-social{
  color: #000;
  margin-top:0em;
  position: relative;
  padding-left: .75em;
  padding-right: .75em;
  font-size: .85em;
}
.hover-helper:hover{
  padding-top: 1em;
}
div{
  float:left;
}

<div class="hover-helper"><button class='btn-social'>Facebook</button></div>
<div class="hover-helper"><button class='btn-social'>Google</button></div>

Answer 2

这种情况正在发生，因为当按钮为hover时，该按钮会尝试获得1em边距，因此它会生成按钮shake。像这样制作margin-top:0em;

.btn-social:hover{
    margin-top: 0em;
    background-color: red;
}

Answer 3

当您将鼠标悬停在按钮上时，将应用“给：悬停”样式

.btn-social:hover {
    margin-top: 1em;
}

当按钮超出鼠标时，也会发出mouseout事件。所以风格还原，再次翱翔。请参阅此小提琴http://jsfiddle.net/h93jkxck/3/您可以删除边距并在：悬停部分

中添加其他一些样式

Answer 4

当鼠标悬停在链接上时，您正在应用边距顶部。

这没有保证金最高。

http://jsfiddle.net/h93jkxck/1/

.btn-social{
    color: #000;
    margin-top:0em;
    position: relative;
    padding-left: .75em;
    padding-right: .75em;
    font-size: .85em;
    }
div{
    float:left;
}

Answer 5

这是因为利润率。得到它时你的按钮会丢失。这是解决方案： HTML：

timestamp

的CSS：

<div class="hover"><button class='btn-social'>Facebook</button></div>
<div class="hover"><button class='btn-social'>Google</button></div>

http://jsfiddle.net/h93jkxck/2/

按钮在悬停时摇晃

5 个答案: