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

Adding border on hover causes flickering

本文关键字：闪烁 边框 悬停 添加      更新时间：2023-09-26

好的，所以我试图创建一个测试"网格"，建立在BootStrap行之上。

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

然而，这会导致网格奇怪地"移动"。是因为衬垫的原因吗?我该怎么做才能解决这个问题?

下面是示例:http://83.212.101.132/angjs/ang2.html

这是因为盒子模型，你可以尝试box-sizing: border-box;，但我猜它不会有帮助。我建议你使用透明边框。

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

添加:

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

是的，这是因为填充。

你的边框宽度是2px，如果你在悬停时减少2px的内边距，闪烁就会被移除。

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

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

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

1)用outline代替border

在元素上设置一个相同的透明边框，这样当你悬停时，只有边框的颜色会改变

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

#components .wrp {
    border: 2px solid transparent;
}
相关文章：