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;
}

Answer 2

你可以使用一种类似于 intent 的技术，虽然不是执行，但对于Bryn的答案，上面就是这样。

.button {background-image: url(img/for/hover-state.png)
         background-position: top left;
         background-repeat: repeat-x;
         background-color: #fff;
         height: 1.5em;
         width: 5em;
}

.button span
        {background-image: url(img/for/non-hover-state.png);
         background-position: top left;
         background-repeat: repeat-x;
         background-color: #000;
         height: 1.5em;
         width: 5em;
}

.button:hover span
        {background-color: transparent;
         background-image: none;
}

我提到的相似之处是在文档上显示两个图像以避免悬停闪烁。在悬停按钮时，跨度的背景图像将消失，并显示悬停状态，而不必按需加载。

奖励是，虽然我指定了height / width以上这种技术可用于动态重新调整大小，而不是依赖于固定宽度尺寸的图像（或者它像你的一样流畅设计可以允许它。）

Answer 3

这是因为“hover”图像在显示之前需要一段时间才能下载。为防止这种情况，您可以使用精灵图像技术。

示例：Using Sprite Images with INPUT for a Hover Effect

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

3 个答案: