当前位置:首页 >> 技术分享 >> 详情
sousuo
sousuo

18、鼠标移入切换背景图时闪烁的问题

上传时间:2020-05-21             浏览次数:89

一、现象

按钮默认状态下背景图为{background-image:url(a.jpg)},如图(1)。

想要鼠标移入时背景图变化为{background-image:url(b.jpg)},如图(3)。

可是每次新打开网页后,在第一次鼠标经过按钮时,发现图片都会闪烁一次,也就是会经过短暂的空白如图(2)然后才变为图(3)。

二、原因

当页面第一次加载完成时,只加载了默认状态的背景图,而鼠标移入时需要切换成的背景图未被加载过,所以它需要先加载,然后才能显示,因此鼠标第一次移入时会出现闪烁的情况。

三、解决办法

把前后变化的两张背景图布置在同一张图上,鼠标移入时,通过控制background-position 的值达到切换背景的效果。因为前后变化的是背景图都在同一张图上,页面加载的时候已经加载过,所以便不会出现闪烁。

0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们