使用 css 背景图像的图像翻转答案

【问题标题】：Image rollover using css background image使用 css 背景图像的图像翻转
【发布时间】：2012-08-28 21:52:24
【问题描述】：

我探索了创建图像翻转效果的替代方法（CSS 和 javascript）。在此过程中，我使用一种特定的 CSS 方法遇到了无法解释的行为：

.main-banner a#link1{
    background-image: url(images/yellow-button_03.png);
    background-repeat: no-repeat;   
    width:310px;
    height:85px;
    top:190.2px;
    left:277px;
} 

.main-banner a:hover#link1{

    background-image: url(images/yellow-button-bright_03.png);
    background-repeat: no-repeat;

}

此方法使用背景图像创建热点。在鼠标悬停时，图像被替换为具有完全相同尺寸的不同颜色的按钮。

第一次鼠标悬停时会出现非常轻微的闪烁，因为翻转图像只是第一次初始化。该事件仅在样式表的第一个缓存之后发生。

我的问题如下：

鉴于 CSS 已完全加载，为什么会出现这种情况？

该行为是否表明在初始鼠标悬停事件之前未加载 css 背景翻转图像？然而，这种情况并非如此。

请不要为复制翻转功能提供替代解决方案。这不是问题。

我只想了解为什么在第一次翻转时会有轻微的闪烁。谢谢。

【问题讨论】：

标签： css image rollover

【解决方案1】：

.main-banner a#link1:hover{

    background-image: url(images/yellow-button-bright_03.png) no-repeat;

}

一般伪类写在selector之后，a or a#link1就是selector所以应该写a#link1:hover

查看此http://jsfiddle.net/d5RpE/1/

@Tuanderful - 在这种情况下我们可以使用“图像精灵”，这样当第一次发生 :hover 事件时 - 图像不会波动

【讨论】：

使用上面的方法，还是出现波动。我感谢您的回复，但问题仍未得到解答。我正在寻找“为什么”而不是“如何”。

【解决方案2】：

虽然 CSS 已完全加载，但我认为 CSS 中引用的所有元素在需要时才会加载。换句话说，yellow-button_03.png 会在页面首次加载时加载以呈现链接，但我相信 yellow-button-bright_03.png 只有在您将鼠标悬停在链接上时才会加载。

【讨论】：

这是我想到的第一个解释。我想确定这个解释是 100% 正确的。
我通过检查 Chrome 中的元素验证了这一点。我在 www.2uan.com 上做了类似的事情；如果您加载页面并查看开发人员工具中的“资源”选项卡，在 Frames > (2uan.com) > Images 下，在页面加载时，您将看到已加载social.png 图像。将鼠标悬停在页脚中的图标上后，您将看到更新为 social-hover.png 的图像。我不确定这是否是解决问题的最佳方法，但我可能会将social 精灵与social-hover 精灵结合起来，在页面加载时将它们全部加载并消除闪烁。