HTML、CSS:悬停可创建双倍图像，但仅适用于智能手机Google Chrome

Question

我正在为我的初创公司创建一个网页，但我在使用鼠标悬停事件时遇到了问题。它与这个页面相关：www.innomotion-media.com

正如您所看到的，将鼠标悬停在三个图像中的一个图像上会将图像更改为彩色图像。然而，这种方法运行良好:当在智能手机上(至少在我的三星S8上使用谷歌Chrome)打开上述链接时，图像会显示两次。黑白的和彩色的。所以有6个图像，而不仅仅是想要的两个。

我试着用火狐在我的智能手机上打开这个页面，结果显示正确。我也尝试过在我的电脑上使用it浏览器，它也能工作。

这是我使用的HTML：

    <div class="container">

        <div align="center">
        <a href="./page_construction.html">
            <div class="card">          
                <img src="./img/index_left_bw.png" alt="Card Back">             
                <img src="./img/index_left.png" class="img-top" alt="Card Front">           
            </div>
        </a>
        </div>

        <div align="center">
        <a href="./page_appDev.html">
            <div class="card">          
                <img src="./img/index_center_bw.png" alt="Card Back">               
                <img src="./img/index_center.png" class="img-top" alt="Card Front">         
            </div>
        </a>
        </div>

        <div align="center">
        <a href="./page_recording.html">
            <div class="card">          
                <img src="./img/index_right_bw.png" alt="Card Back">                
                <img src="./img/index_right.png" class="img-top" alt="Card Front">          
            </div>
        </a>
        </div>  
    </div>

这是对应的CSS:；

/*font face*/

  @font-face {
      font-family: "Baiti";
      src: url("./fonts/baiti.ttf");
    }
    body { font-family: "Baiti", serif }

.container{
    width:900px;
    margin:auto;
}

.card {

    position: relative;

    display: inline-block;

}

.card .img-top {

    display: none;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 99;

}

.card:hover .img-top {

    display: inline;

}

有没有更好的方法来做到这一点，这样它在所有浏览器上看起来都是一样的，无论是不是智能手机？

我希望你能帮助我，这是我第一次问任何问题:)

谢谢!

Answer 1

您可以在CSS中对悬停时移除的彩色图像使用灰度滤镜，而不是使用重叠图像。

从HTML中删除第二个图像：

<div align="center">
    <a href="./page_construction.html">
        <div class="card">          
            <img src="./img/index_left.png" class="img-top" alt="Card Front">           
        </div>
    </a>
</div>

删除.img-top的现有CSS并用以下内容替换：

.card .img-top {
    filter: grayscale(100%);
}

.card .img-top:hover {
    filter: none;
}

将显示彩色图像，但上面有灰度滤镜，因此图像是黑白的。当您将鼠标悬停在它上面时，滤镜将被移除，图像将以正常颜色显示。

这样就不再需要两张图片，其中一张绝对定位。