在CSS中,:hover伪类用于在鼠标指针悬停在元素上时更改其样式。但是,当鼠标指针从元素上移动时,有时会发生闪烁。这是因为当鼠标移动到元素上时,浏览器会重新计算元素的布局和样式,这可能会导致页面重新绘制,因此导致元素闪烁。
为了解决这个问题,我们可以使用以下方法:
/* 取消鼠标悬停时元素失焦的默认闪烁效果 */ a:hover { outline: none; } /* 给元素加上一个基础样式属性 */ a { transition: all .3s ease; /* ... 其它属性 */ } /* 给:hover样式添加更高的权重,覆盖基础样式属性 */ a:hover, a:focus { background-color: #f00; /* ... 其它属性 */ }
使用这些方法,我们可以消除鼠标指针悬停时元素闪烁的问题。