在移动环境下，你是如何获得悬停/活动的？

Question

我制作了一个有图片库的网站，如果你把鼠标移到图像上，你就会看到一张白卡，上面有关于每幅图像的一些信息。这个网站是实时的，它在桌面电脑上运行得很好，但是如果你试图在移动设备上使用它，当你点击图片时什么都不会发生。这对我来说很奇怪，因为当我使用实时web服务器并检查页面时，它似乎可以在移动上工作，但是在我将所有内容部署到GitHub之后，它并没有工作。

我查了这个问题，看到人们说，不只是使用悬停，你还需要添加:激活的元素，你要点击的移动设备，所以我这样做，但它仍然不起作用。

我应该在CSS中更改什么？

​

.gallery {
  margin: 0;
  padding: 0;
  position: relative;
}

.image-gallery {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  padding: 50px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  grid-gap: 20px;
}

.image-gallery .image-box {
  position: relative;
  overflow: hidden;
}

.image-gallery .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.image-gallery .image-box:hover img {
  transform: scale(1.1);
}

.image-gallery .image-box .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fafaf2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 1;
}

.image-gallery .image-box:hover .overlay {
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  opacity: 1;
}

.image-gallery .image-box:hover,
.image-box:active .overlay {
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  opacity: 1;
}

.image-gallery .image-box .details {
  text-align: center;
}

.image-gallery .image-box .details .title {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 600;
  position: relative;
  top: -5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.image-gallery .image-box .details .category {
  font-size: 18px;
  font-weight: 400;
  position: relative;
  bottom: -5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.image-gallery .image-box:hover .details .title {
  top: 0px;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s 0.2s ease;
}

.image-gallery .image-box:hover,
.image-box:active .details .title {
  top: 0px;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s 0.2s ease;
}

.image-gallery .image-box:hover .details .category {
  bottom: 0;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s 0.2s ease;
}

.image-gallery .image-box:hover,
.image-box:active .details .category {
  bottom: 0;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s 0.2s ease;
}

.image-gallery .image-box .details .title a,
.image-gallery .image-box .details .category a {
  color: #222222;
  text-decoration: none;
}

<div class="image-gallery">
  <div class="image-box">
    <img src="https://via.placeholder.com/1200" alt="painting">
    <div class="overlay">
      <div class="details">
        <h3 class="title" style="color:black">
          Piece 1
        </h3>
      </div>
    </div>
  </div>

​

编辑:我只需将tabindex="0“添加到名为图像库的类div中，就可以修复它。感谢每一个试图帮助你的人

Answer 1

移动没有可以悬停的鼠标，所以尝试使用:focus而不是:hover或:active，并在媒体查询中插入代码(例如下面的例子)，所以它只显示在手机上。

@media only screen and (max-width: 989px) {
/* code here */
}