使用css背景图像翻转图像

我已经探索了创建图像翻转效果的替代方法（两种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背景翻转图像直到最初的鼠标悬停事件才被加载？然而，这种情况并非如此。

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

我只想了解为什么第一次翻滚时会出现轻微闪烁。谢谢。 a or a#link1选择之后写入

来源

2012-08-28 user1526693

is link1 an id？ –

.main-banner a#link1:hover{ 

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

}

一般伪类，是选择，所以你应该写a#link1:hover

结帐这个http://jsfiddle.net/d5RpE/1/

@Tuanderful - 正是因此，在这种情况下，我们可以使用“图片组合”，所以当第一次：悬停事件将发生 - 图像将不会波动

来源

2012-08-28 13:30:49 Chandrakant

使用上述方法，波动仍然会发生。我感谢你的回复，但是，问题仍然没有得到答复。我正在寻找“为什么”而不是“如何”。 – user1526693

你有没有使用/尝试过“图像刺激”？ – Chandrakant

尽管CSS已完全加载，我不认为CSS中引用的所有元素直到需要时才加载。换句话说，yellow-button_03.png被加载以在页面第一次加载时呈现链接，但是我相信yellow-button-bright_03.png仅在您将鼠标悬停在链接上之后才加载。

来源

2012-08-28 13:47:05 Tuanderful

这是我想到的第一个解释。我想确保这个解释是100％正确的。 – user1526693

我通过检查Chrome中的元素对此进行了验证。我在www.2uan.com上做了类似的事情;如果您加载页面并查看开发工具中的资源选项卡，在框架>（2uan.com）>图片下，在页面加载时，您会看到加载了一个“social.png”图片。一旦你将鼠标悬停在页脚的图标上，就会看到用'social-hover.png'更新的图像。我不确定它是否是解决问题的最佳方式，但我可能会将“社交”小精灵与“社交悬停”小精灵相结合，以便在页面加载时加载它们并摆脱闪烁。 – Tuanderful

使用css背景图像翻转图像

回答

相关问题