按钮悬停效果

Posted 2023-03-06

【中文标题】按钮悬停效果

【英文标题】：Button Hover Effect

【发布时间】：2012-11-05 19:39:17

【问题描述】：

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

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

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

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

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

div#preloadedImages

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

【问题讨论】：

只尝试背景：url(images/button2.png)

嘿Asf，我为你创建了一个工作演示，链接在我的回答中:)

【参考方案1】：

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

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

【参考方案2】：

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

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

点击这里>>>FIDDLE

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

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

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

.button:hover 
    background-position: left bottom;
 

【参考方案3】：

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

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