0

我已经探索了创建图像翻转效果的替代方法（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 背景翻转图像？然而，这种情况并非如此。

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

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

4

2 回答 2

1 
.main-banner a#link1:hover{

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

}

Generally pseudo classes written after selector, a or a#link1 is selector so you should write a#link1:hover

Checkout this http://jsfiddle.net/d5RpE/1/

@Tuanderful - exactly so in this condition we can use "image spriting", so that when first time :hover event will occur - image will not fluctuate

于 2012-08-28T13:30:49.213 回答
0

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

于 2012-08-28T13:47:05.260 回答