懸停時按鈕震動

我在懸停按鈕時遇到了問題。當鼠標沒有完全按在按鈕上時，它們似乎會抖動。懸停時按鈕震動

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

我試着給它一個min-height但它仍然顫抖。

2015-09-21 Greg

它，因爲他們改變他們對懸停位置，所以實際上不再被盤旋......它看起來就像他們「發抖」

試試這個：

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

來源

2015-09-21 09:57:57 FalcoB

這是因爲當按鈕是hover該按鈕試圖獲得1em保證金，因此它使按鈕shake。使margin-top:0em;這樣

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

來源

2015-09-21 09:56:59

但如果我這樣做，那麼我的懸停不工作。他需要有1em換位。 – Greg

@Greg以上只會讓按鈕停止晃動。在此之後，如果您應用另一個屬性，比如'background-color：red;'等背景色，則不如此 –

當你懸停按鈕得出：hover樣式應用

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

此外，作爲按鈕超出鼠標的鼠標事件。所以風格被恢復，並且盤旋再次發生。看到這個小提琴http://jsfiddle.net/h93jkxck/3/您可以刪除邊距，並添加一些其他樣式：懸停部分

來源

2015-09-21 09:58:46

當鼠標懸停在鏈接上時，您正在應用邊距頂部。

這是沒有保證金最高。

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; 
}

來源

2015-09-21 09:59:12

這是因爲利潤率。得到它時，你的按鈕會失去懸停。這裏是解決方案： HTML：

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

CSS：

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

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

來源

2015-09-21 10:01:36 Anton

懸停時按鈕震動

回答

相關問題