Question

我有一个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/

我发现的两种方式是：

正常状态下的保证金等于悬停时的填充，然后悬停时的保证金
填充处于正常状态，而不是悬停

我绝对不喜欢第一种情况。如果我别无选择，我会选择第二个。

其他什么想法？

Answer 1

正常状态下的填充很好，但另一种方法是使用负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);
}

2d转换为well supported（甚至来自IE9）

示例：http://jsfiddle.net/5pbk9djp/117/

Answer 2

有了这个你不关心浏览器兼容性，所有前缀-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/

与填充继续前进的填充的元素

2 个答案: