按钮悬停效果

Question

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

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

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

}

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

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

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

}

Answer 1

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

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

Answer 2

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

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

点击此处＆gt;＆gt;＆gt; FIDDLE

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

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

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

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

Answer 3

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

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