css hover状态图片卡闪
注意不是IE浏览器，chrome内核下元素的hover状态触发时会卡闪
代码如下：
<body>
<a href=""></a>
</body>
a{
background:url("img");
}
a:hover{
background:url("img_hover");
}初次进入页面时就会有一定概率卡闪，个人猜测是与网速有关，hover触发时新图片是从服务器获取，但hover已经触发，原图消失hover图还未请求到就会卡闪
不知道有啥解决办法，现在已经不适用雪碧图了，原图和hover图都是分开的
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
你可以参考下这个利用link的preload能让浏览器尽快的加载图片，而不是等到hover的时候才去加载，至于会闪，我猜是因为你这个元素hover前后的大小变了导致不停的重复触发hover
https://codesandbox.io/s/swee...
为什么会闪？因为第二张图片加载需要时间，所以会闪。
那么解决的方向就是让第二张图片不需要加载、提前加载第二张图片
没什么好的办法，就硬来，提前把图片加载好，这可以利用css或js
4楼正解
把两张图片放到一个雪碧图上 通过控制background-position: 来实现这个效果