Question

我正在为启动建立网页，但是使用鼠标悬停/悬停事件时遇到麻烦。它涉及以下页面：www.innomotion-media.com

如您所见，用鼠标悬停在三张图像之一上，会将图像更改为彩色图像。但是，这很好用：在智能手机上（至少在带有Google Chrome的三星S8上）打开所述链接时，图像显示两次。黑色和白色和彩色的之一。因此，有6张图片，而不是所需的2张图片。

我尝试在使用Firefox的智能手机上打开页面，此页面显示正确。我也尝试在计算机上使用Internet Explorer，它也可以工作。

这是我使用的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;
}

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

这消除了具有两张图片的位置，而一张图片的位置绝对不变。

HTML，CSS：悬停可创建两倍的图像，但只能在智能手机Google Chrome上

1 个答案: