Question

当我在页面加载后第一次将光标悬停在徽标上时，它会开始快速闪烁约一秒钟。我曾考虑使用精灵，但我不想将徽标设置为背景图像 - 我已经有了一个。这是我的CSS代码：

<!DOCTYPE HTML>
<head>
<style>
html {
    background-image:url('backgroundimage.jpg');
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-filter: brightness(0.6);
    -moz-filter: brightness(0.6);
    -o-filter:  brightness(0.6);
    -ms-filter:  brightness(0.6);

}

#logo {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -250px;

}

#logo:hover 
{
    content: url('logobeforehover.png');
}
</style>
</head>
<body>
    <div id="logo">
        <img src="logoafterhover.png"/>
    </div>
</body>
</html>

Answer 1

总会总是闪烁，因为用户的浏览器必须从服务器加载图像。 TCP＆amp; HTTP有一些开销，你可以合理预期的最快（即使对于非常小的图像）大约是100-200ms。这通常是显而易见的。实际上，时间往往更高。

可能的解决方案：

将图像放在页面的某个位置，但不显示它。经常使用display: none，但that doesn't seem reliable anymore;或者，您可以添加width＆amp;的图像。 height的{{1}}和1px的{{1}}。恕我直言，这很难看。请注意，这也会增加初始页面加载量。
不要使用CSS，而是使用Javascript来切换图像。通过这种方式，您可以预加载图像，并在加载图像时进行更改。准备就绪，例如：
```
z-index
```
使用CSS精灵，你已经提到过你不想这样做，但为了完成，我会列出它。恕我直言，这是最好的解决方案。

Answer 2

简单...... 在#logo和#logo中添加相同的宽度和高度：像这样悬停

 #logo {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -250px;
        margin-left: -250px;
        width:XXpx;
        height:XXpx;

    }

    #logo:hover 
    {
        content: url('logobeforehover.png');
        width:XXpx;
        height:XXpx;
    }

用其他图像（CSS）替换时，防止悬停时图像闪烁

2 个答案: