image - 按钮悬停效果

Question

我对 CSS 和网络编程很陌生。我想要做的是为按钮添加悬停效果。我通过使用 2 张图片来做到这一点。

有一个名为下载的按钮，我在悬停代码中添加：

.button:hover{
    background-image:url(images/button2.png);

}

问题是按钮需要时间来加载，即：悬停时显示按钮会有延迟。我该如何解决这个问题？

编辑：我尝试使用预加载，但也有一种延迟

div#preloadedImages
{
    width: 0px;
    height: 0px;
        background-image: url(images/button2.png);

}

score 0 · Accepted Answer

您应该使用图像精灵来消除延迟。sprite 是一个包含多个图像的较大文件。您的按钮将其背景设置为 sprite.png 文件。然后，您可以更改background-position属性以移动精灵的位置。

另一方面——你为什么使用图像作为按钮？大多数按钮都可以在纯 CSS 中完成，并为旧浏览器提供一些备用。

score 0 · Accepted Answer

从两个图像中创建一个图像（称为精灵）

这是一个带有动画的工作示例，向您展示它是如何工作的。

点击这里 >>>小提琴

然后将您的背景位置设置为以显示背景图像的正常状态

 .button {
    width: 150px;
    height: 50px;
    background-image: url('image-sprite.jpg');
    background-position:  left top;
}

然后在你的悬停css上，只需移动背景图像以显示它的下部

.button:hover {
    background-position: left bottom;
 }

score 0 · Accepted Answer

保持您当前的 css 和其他内容不变，并<img>在页面的任何位置添加一个组件，并将其隐藏以最初加载图像。

<img src="images/button2.png" style="display:none;"/>

3 回答 3