元素與填充移動懸停

我有一個a元素。懸停時，我將添加輪廓和輪廓偏移量以及其他填充。問題在於元素在懸停時移動。元素與填充移動懸停

HTML

<a href="javascript:void(0)" class="link">test</a>

CSS

.link { 
    display: inline-block; 
    // margin: 1px 1px; 
} 

.link:hover { 
    outline: 0.125rem dotted red; 
    color: black; 
    outline-offset: -1px; 
    padding: 1px 1px; 
     // margin: 0; 
}

http://jsfiddle.net/5pbk9djp/116/

的兩種方法，我發現是：

利潤率在正常狀態下等於懸停和填充然後保證金0懸停
填充是在正常狀態下，而不是在懸停

我絕對不喜歡的第一個場景。如果我沒有別的選擇，我會爭取第二名。

任何其他想法？

來源

2014-11-06 Mdb

爲什麼你不會選擇＃2的任何特定原因？對我來說，這似乎是解決您的問題。 – 2014-11-06 09:16:48

原因是我改變了默認行爲，而我正在解決這個問題，但畢竟，我決定去用它，因爲它看起來更乾淨。 – Mdb 2014-11-06 09:26:56

正常狀態下的填充很好，但另一種方法是使用否定translateX和translateY（例如，

.link:hover { 
    ... 
    padding: 1px 1px; 
    -webkit-transform: translate(-1px, -1px); 
    -moz-transform: translate(-1px, -1px); 
    -o-transform: translate(-1px, -1px); 
    transform: translate(-1px, -1px); 
}

被 well supported（甚至從IE9）

例

2D轉換：http://jsfiddle.net/5pbk9djp/117/

來源

2014-11-06 08:38:03 fcalderan

非常好的解決方案。我發現的一個問題是，如果有另外兩個鏈接正在移動：http://jsfiddle.net/5pbk9djp/122/。你有什麼想法如何解決這個問題？ – Mdb 2014-11-06 09:00:44

我與我的第二個解決方案與填充，但感謝有趣的建議。你從這個答案中得到了答案。 – Mdb 2014-11-06 09:28:19

這樣，你不關心瀏覽器的兼容性，所有前綴-moz，-webkit ......沒有必要

.link { 
    display: inline-block; 
} 

.link:hover { 
    outline: 0.125rem dotted red; 
    color: black; 
    outline-offset: -1px; 
    padding: 1px 1px; 
    position: relative; 
    top: -1px; 
    left: -1px; 
}

例如：https://jsfiddle.net/b7s4d89x/

來源

2014-11-06 09:32:25 areim

元素與填充移動懸停

回答

相關問題