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

一、现象

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

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

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

二、原因

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

三、解决办法

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