在悬停时切换 img src 时如何消除“闪烁”？答案

【问题标题】：How do you remove the 'flicker' when switching img src on hover?在悬停时切换 img src 时如何消除“闪烁”？
【发布时间】：2020-02-07 03:08:15
【问题描述】：

http://mintrain.co.uk/portfolio.html

这是我最新网站的测试服务器。在悬停时更改 img src 时遇到问题。在 Safari 和 Chrome 中，当用鼠标悬停在图像上时，它会在显示图像之前“闪烁”为白色。在这个初始闪烁之后，重新悬停按预期工作。有什么想法吗？

HTML：

<div class="gallery">
        <div class="maxw">

            <div class="pbox">
                <div class="image" id="one"></div>
            </div>

            <div class="pbox">
                <div class="image" id="two"></div>
            </div>

            <div class="pbox">
                <div class="image" id="three"></div>
            </div>

            <div class="pbox">
                <div class="image" id="four"></div>
            </div>


        </div>
    </div>

CSS：

.pbox {
    width: 45%;
    height: 500px;
    display: inline-block;
    text-align: center;
}

.image {
    display: block;
    margin: auto;
    width: 300px;
    height: 500px;
}


 #one {
    background: url(/images/portfolio/1.jpg) no-repeat;
    background-size: contain;
    transition: 0.3s;
}


#one:hover {
    background: url(/images/portfolio/1A.jpg) no-repeat;
    background-size: contain;
}

等等等等

提前致谢

【问题讨论】：

你为什么不使用filter: grayscale(100%);？ jsfiddle.net/ncsk0eao

标签： html css

【解决方案1】：

你可以这样做

 #one {
    background: url(/images/portfolio/1A.jpg) no-repeat; //same image here
    background-size: contain;
    transition: 0.3s;
    filter: grayscale(100%);

}


#one:hover {
    background: url(/images/portfolio/1A.jpg) no-repeat; //same image here
    background-size: contain;
    filter: grayscale(0%);

}

【讨论】：

你有IA 而不是1A
Np 问题，将 IA 修复为 1A :-)

【解决方案2】：

在这种特定情况下，您可以使用 filter: grayscale(1) 并转换它。

但更一般地说，如果您有不同的图像，您可以将它们分层。

#one:hover {
    background-image: url(/images/portfolio/1A.jpg), url(/images/portfolio/1.jpg);
}

顺便说一句，闪烁发生的原因是更改背景图像会卸载当前图像，然后加载新图像，如果新图像尚未缓存，则需要一些时间。

【讨论】：

感谢您的回答，滤镜灰度效果更好