Question

所有我想将悬停状态设置为在移动设备上激活

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

但是，当用户仅在向用户显示图片后使用移动设备访问网站

我的destop已完成实施，但不知道如何实现移动版

    .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）的媒体查询，您应该很高兴。要查看此操作，请展开下面的演示并相应地调整浏览器宽度。

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

如何显示覆盖悬停状态i

1 个答案: