Question

我做了一个jsfiddle，你可以看到当你悬停div时，文字会向左跳1个像素。据我所知，这是由于边界，但我不知道如何解决它。有什么想法吗？

这是我的代码：

#weather {
position: fixed;
top:10px;
right:35px;
transition: 0.5s ease;
cursor: pointer;
padding: 5px;
opacity:0.7;
}

#weather:hover {
opacity: 1;
border-left:1px solid #333;
border-right:1px solid #333;
}

Answer 1

<强> CSS：

#weather {
    position: fixed;
    top:10px;
    right:35px;
    transition: 0.5s ease;
    cursor: pointer;
    padding: 5px;
    border-left:1px solid transparent;
    border-right:1px solid transparent;
}

由于你在悬停时间引入了边框，因此它表现得像那样有边框，只有在悬停时才能看到它。

JSFiddle

Answer 2

这是通过向css添加1px边框引起的。为了解决这个问题，首先添加1px白色边框 - 或者，我只是注意到Kawinesh有更好的解决方案 - 使用1px实心透明。 +1到Kawinesh。

#weather {
    position: fixed;
    top:10px;
    right:35px;
    transition: 0.5s ease;
    cursor: pointer;
    padding: 5px;
    border-left:1px solid white;
    border-right:1px solid white;
}

jsFiddle Demo

悬停后，文本向左跳1个像素

2 个答案: