Question

我有一个网站：parisforaweekend.com带有'subscribe'按钮图像，可在鼠标悬停时更改颜色。两个图像都是同一图像精灵的一部分。

仍然在Chrome中（第15节）我变得非常明显，但不规则发生，鼠标悬停时闪烁。这怎么可能呢？还在IE8和FF6上进行了测试，似乎没有问题。这让我很烦恼。

我想一般的问题是，之前有人见过这样的事吗？什么能解释这种奇怪的行为？

虽然我看不出它有什么用处，但我还是包含了相关的css-snippet：

CSS

编辑：改变了css规则的顺序以反映真实情况（虽然我看不出有所作为）

#mc_embed_signup input.button {
display: inline-block;
width: 100px;
margin: -1px 0 10px 15px;
padding: 0;
border: 0 none;
cursor: pointer;
background: url('http://static.parisforaweekend.com/img/s.jpg') 0 0;
line-height: 32px;
}

#mc_embed_signup input.button:hover {
background: url('http://static.parisforaweekend.com/img/s.jpg') -101px 0;
}

HTML

<input type="submit" value="" name="subscribe" id="mc-embedded-subscribe" class="button">

编辑：也许这与我使用S3 + cloudfront（亚马逊的CDN）的事实有关。没有正确缓存（在Edge-location或客户端上）并执行2个请求或其他内容。嗯，还不太可能。

Answer 1

您是否尝试使用背景位置而不是背景？我没有看到你提到的问题，但它可能与在悬停时基本上重新定义背景图像有关。

Answer 2

a.btndownload{background-image:url(../images/btn-download-sprite.gif); background-position:left top; background-repeat:no-repeat; display:block;}
a.btndownload:link{background-position: left top;}
a.btndownload:visited{background-position: left top;}
a.btndownload:hover{background-position:  0px -34px;}
a.btndownload:active{background-position:  bottom left;}

以上是使用图像精灵时解决图像闪烁问题的示例代码。

不要反复覆盖图像网址，即使它与第一个网址相同。否则，它会给Chrome错误信号反复加载相同的图像。

此问题再次出现在Chrome 18上。其他浏览器如IE 9和Firefox都可以。

Answer 3

当页面加载时，第一个背景图像会自动加载。当你然后鼠标悬停它然后检索第二个图像导致轻微延迟。你提到的不规则性是基于缓存。如果图像被缓存，那么你就不会闪烁。

要解决将图像并排放在相同的.jpg 中。然后使用background-position设置所需的图像。

将不再需要检索图像，这将阻止您的闪烁。

Answer 4

我不知道为什么Chrome上出现闪烁，但你不应该为hover伪类设置背景图片网址，只能更改背景位置。请试试这个

#mc_embed_signup input.button:hover {
    background-position: -101px 0;
}

Answer 5

我通过Google搜索在我的网站上发现了同样的问题。鉴于时间安排（这是昨天提到的），我认为这是一个新的错误，最新的Chrome版本在缓存机制中引入。

如其他答案中所述，从其他图像中删除背景图像应该可以解决问题。我正在使用Smart Sprites生成精灵，所以我不能轻易删除它（它会自动插入），但我想我必须编写一个后期构建脚本来做它，我没有看到另一个溶液

Answer 6

我刚遇到同样的问题。但就我而言，这是由其他一些规则引起的。将CSS3过渡设置为0可以解决问题：

-webkit-transition: 0s;
-moz-transition:    0s;
-o-transition:      0s;

即使将精灵用于悬停图像，鼠标悬停时图像也会闪烁

6 个答案: