在悬停时提交按钮消失,然后重新开始

Question

所以我使用CSS:悬停以替换提交按钮背景.当我将鼠标悬停在按钮上时,旧的背景图像会消失(因此看起来没有任何东西),然后重新出现在新背景中.我想也许按钮图像文件大小太大但只有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;
}