Question

小提琴：

button.products:hover {
    background-color: #fff;
    color: #303030;
    cursor: pointer;
    border: 4px solid #0085ca;
}

出于某些原因，在添加边框时，Chrome会出现这种奇怪的跳跃。它会被添加，然后在一瞬间稍微大一些。有什么方法可以解决这个问题吗？

Answer 1

将transitions从all更改为background-color：

-webkit-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;

使用all时，所有属性都会获得转换。因此，您的边界从1px变为4px，因此产生了奇怪的效果。