注意不是IE浏览器，chrome内核下元素的hover状态触发时会卡闪
代码如下：
极客观点
项目管理
HarmonyOS
<body>
<a href=""></a>
</body>
a{
background:url("img");
}
a:hover{
background:url("img_hover");
}初次进入页面时就会有一定概率卡闪，个人猜测是与网速有关，hover触发时新图片是从服务器获取，但hover已经触发，原图消失hover图还未请求到就会卡闪
不知道有啥解决办法，现在已经不适用雪碧图了，原图和hover图都是分开的
为什么会闪？因为第二张图片加载需要时间，所以会闪。
那么解决的方向就是让第二张图片不需要加载、提前加载第二张图片
已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。
html5
a{
background:url("img");
}
a:after{
content:"";
background:url("img_hover");
}
a:hover{
background:url("img_hover");
}3 回答5.2k 阅读✓ 已解决
5 回答2.1k 阅读
3 回答1.5k 阅读✓ 已解决
2 回答2k 阅读✓ 已解决
3 回答1.2k 阅读✓ 已解决
1 回答3.1k 阅读✓ 已解决
3 回答2.5k 阅读
你可以参考下这个利用link的preload能让浏览器尽快的加载图片，而不是等到hover的时候才去加载，至于会闪，我猜是因为你这个元素hover前后的大小变了导致不停的重复触发hover
https://codesandbox.io/s/swee...