移动端图片画廊hover/active效果失效，如何修改CSS解决？

问题描述 #

我做了个图片画廊网站，桌面端鼠标悬停图片时会弹出带图片信息的白色卡片，桌面端完全正常，但部署到GitHub后，移动端点击图片毫无反应。奇怪的是用Live Web Server本地调试时，移动端看似能正常工作。我查了相关问题，尝试给点击元素加:active伪类，但问题没解决。需要修改CSS的哪部分？

现有代码 #

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

HTML

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

问题分析 #

你的CSS里针对:active的写法有两个核心问题：

1. 选择器语法错误：比如.image-gallery .image-box:hover, .image-box:active .overlay，逗号分隔的两个选择器作用对象不一致——前半部分是.image-box本身，后半部分是.image-box激活状态下的子元素.overlay，导致样式无法正确关联触发。同时.image-box:active没有继承.image-gallery的上下文，在复杂DOM结构下可能匹配不到目标元素。
2. 移动端交互限制：普通<div>默认不具备可聚焦/可点击特性，部分移动端浏览器不会给这类元素触发:active状态，即使语法正确，触摸点击也可能没反应。

修复方案 #

1. 修正CSS选择器 #

把所有包含:active的选择器调整为和:hover一致的结构，确保作用对象和上下文匹配：

/* 修复overlay的hover/active状态 */
.image-gallery .image-box:hover .overlay,
.image-gallery .image-box:active .overlay {
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  opacity: 1;
}

/* 修复title的hover/active状态 */
.image-gallery .image-box:hover .details .title,
.image-gallery .image-box:active .details .title {
  top: 0px;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s 0.2s ease;
}

/* 修复category的hover/active状态 */
.image-gallery .image-box:hover .details .category,
.image-gallery .image-box:active .details .category {
  bottom: 0;
  opacity: 1;
  visibility: visible;
  transition: all 0.3s 0.2s ease;
}

2. 让元素具备可交互性 #

给.image-box添加tabindex="0"，赋予它可聚焦特性，这样移动端触摸时就能正常触发:active状态：

<div class="image-box" tabindex="0">
  <!-- 图片和overlay内容 -->
</div>

最终解决方法（用户补充） #

我给带有image-gallery类的div添加了tabindex="0"，问题得到解决。

内容的提问来源于stack exchange，提问作者NotBrandX