移动设备上的 IMG

Question

我的 web 上有一些图像，这些图像在 hover 上生长。 在移动设备上，它们会随着点击而增长。 但是，一旦我单击它们并且它们长大，我就无法通过再次单击来缩小它们。 所以我看不到其他图像。 这仅在移动设备上，因为在更大的屏幕上它在 hover 上，而不是点击。 真的不知道如何解决这个问题。

 .container-interests { display: flex; width: 100%; padding: 2%; box-sizing: border-box; height: 80vh; margin-top: 40px; }.box { flex: 1; overflow: hidden; transition: .5s; margin: 0; box-shadow: 0 20px 30px rgba(0, 0, 0, .1); line-height: 0; }.box>img { width: 100%; height: calc(100% - 10vh); object-fit: cover; position: relative; transition: .5s; }.box>span { font-size: 3.8vh; display: block; text-align: center; height: 10vh; line-height: 2.6; }.box:hover { flex: 0.5 0.5 35%; }.box:hover>img { width: 100%; height: 100%; } @media screen and (max-width: 575px) {.box:hover { flex: 0.5 0.5 auto; } }

 <div class="container-interests"> <div class="box"> <img src="assets/css/img/trekking.jpg"> <span><i class="fas fa-mountain"></i></span> </div> <div class="box"> <img src="assets/css/img/mountain.jpg"> <span><i class="fas fa-hiking"></i></span> </div> <div class="box"> <img src="assets/css/img/camping.jpg"> <span><i class="fas fa-campground"></i></span> </div> <div class="box"> <img src="assets/css/img/argentina.jpg"> <span><i class="fas fa-plane"></i></span> </div> <div class="box"> <img src="assets/css/img/biking.jpg"> <span><i class="fas fa-bicycle"></i></span> </div> <div class="box"> <img src="assets/css/img/pets.jpg"> <span><i class="fas fa-dog"></i></span> </div> </div>

Answer 1

这将解决您的问题。 问题是， hover在移动设备上的工作方式与在 PC 版本上的工作方式不同。 因为移动设备没有mousemove之类的属性。

@media screen and (max-width: 575px) 
 {
        .box:hover { flex: unset; }
 }