html - 如何显示覆盖悬停状态我

Question

全部我想在移动设备上将悬停状态设置为事件状态

我有 2 个场景当用户在桌面上使用网站时，当他将鼠标悬停在之前的图像上时，一个又一个图像将被之前替换。

但是当用户仅在图像显示给用户后才使用手机访问网站

我的destop已经实现了，但是不知道怎么实现移动版

DESTOP Example

    .card {
        width: 130px;
        height: 195px;
        position: relative;
        display: inline-block;
        margin: 50px;
    }
    .card .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .card:hover .img-top {
        display: inline;
    }

    <div class="card">
    	<img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back">
        <img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front">

Answer 1

设置一个针对移动设备宽度 (480px) 的媒体查询，您应该可以开始了。要查看实际效果，请展开下面的演示并相应地调整您的浏览器宽度。

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

@media (min-width: 480px) {
  .card .img-top {
    display: none;
  }
  
  .card:hover .img-top {
    display: inline;
  }
}

<div class="card">
  <img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back">
  <img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front">
</div>