javascript - 提交按钮在悬停时消失，然后重新出现

Question

所以我使用 CSS :hover 来替换提交按钮的背景。当我将鼠标悬停在按钮上时，旧背景图像会暂时消失(因此看起来什么也没有)，然后重新出现新背景。我认为也许按钮图像文件太大但只有 1.4kb。有没有一种方法可以防止这种情况发生，缓存或预加载，或者类似的东西？

Answer 1

这是否仅在初始页面显示/悬停时？

这是因为图像文件仅根据请求加载 - 即悬停操作。

为避免这种情况，两个按钮状态都应存储在一个文件中。然后，您只需调整 background-position 属性以显示图像当前状态的正确一半。

这是一个粗略的例子(请注意 button.png 包含两种图像状态并且是 40 像素高):

button {
background-image: url(button.png);
width: 60px;
height: 20px;
background-position: 0 0;
}

button:hover {
background-position: 0 -20px;
}