在悬停时添加边框会导致闪烁

Question

好的，所以我正在尝试创建一个构建在BootStrap行之上的测试“网格”。

每当用户将鼠标悬停在某个项目上时，就会添加一个边框。

但是，这会导致网格奇怪地“移动”。是因为填充物吗？我该怎么办才能解决这个问题？

以下是演示：http://83.212.101.132/angjs/ang2.html

Answer 1

因为盒子模型，你可以尝试使用box-sizing: border-box;，但我猜不出来。我建议你在上面使用透明边框。

#components .wrp {
padding: 10px;
border: 2px solid transparent;
border-radius: 25px;
}

Answer 2

添加：

#components .wrp {
padding: 10px;
border: 2px solid transparent;/* this will fixe it!*/
}

会解决它！

或者如果您想使用box-shadow

#components .wrp {
padding: 10px;
box-shadow: 0 0 0 2px transparent;
border-radius: 20px;
}

悬停

#components .wrp:hover {
box-shadow: 0 0 0 2px #333;
}

Answer 3

在这种情况下，我通常会在非悬停元素上添加透明边框。这意味着悬停时元素的大小不会增加，因为它们已经有边框。

#components .wrp {
    border: 2px solid transparent;
}

Answer 4

是的，这是因为填充。

您的边框宽度为2px，如果您在悬停时减少填充2px，则会消除闪烁..

#components .wrp:hover {
    border: 2px solid #CCC;
    border-radius: 15px;
    padding: 8px;
}

Answer 5

当悬停时，CSS正在添加一个2px边框 - 这意味着它必须找到总共4px（从上到下）和另外4px（左和右）的空间。闪烁是由于元素稍微移动以适应所需的额外像素空间。

有两种方法可以解决这个问题：

1）使用'outline'而不是'border'

2）在元素上设置相同但透明的边框，这样当您悬停时，只有边框的颜色在变化