当我将一个 <a>
标签设置为特定的图像背景时,代码如下:
HTML:
<a href="..." title="click here">Click Here</a>
CSS:
a {
background: transparent url(button.png);
}
我希望当用户将鼠标悬停在指定位置时,背景能够随之改变,就像这样:
CSS:
a {
background: transparent url(button_HOVER.png);
}
当用户将鼠标悬停在链接上时,悬停背景图片会闪烁(需要约1-2秒才能完全加载)。
我可以将文件保存为GIF并缩小其大小和加载时间,但这会严重损害我的特定图像(它很大且高度图形化)。
这就是为什么我正在寻找更好的解决方案,例如依靠浏览器缓存图像的能力。因此,我会像这样对按钮应用样式:
CSS:
a {
background: transparent url(button_HOVER.png);
background: transparent url(button.png);
}
首先需要缓存图像按钮_HOVER。这似乎影响了“闪烁”,但并没有完全解决问题。我考虑创建一个带有HOVER图像的隐藏标签,这样结果可能会不同。
您认为有更好的解决方法吗?(我强调我想保留文件为PNG格式,它的大小为6-7k)。我的方法有效吗?