CSS/HTML实现图片悬停叠加文本的跨浏览器兼容问题求助

• 触发逻辑缺陷：你使用.imgX:hover + .textX相邻兄弟选择器控制显示，文本显示后会覆盖图片元素，导致图片的hover状态丢失，就会出现闪烁，火狐对这类动态触发的hover边界判定更严格，所以直接不触发显示。
• 定位属性缺失：所有.textX类设置了bottom: 0但没有声明定位属性，非定位元素的偏移属性完全无效，文本实际渲染位置异常，进一步影响hover触发判定。
• 移动端兼容缺失：移动端原生没有hover事件，纯hover触发的逻辑点击完全无效。
• 容器高度限制：.container设置了固定height: 100vh，内容超出视口时会出现溢出截断，也会间接影响交互判定。

第一步：调整HTML结构 #

把每组图片和对应文本包裹在同一个父容器内，避免hover状态丢失，示例如下：

<!-- 原来的<img>和<text>是同级分离的，改成包裹结构 -->
<div class="grid-item" style="grid-area: img1;">
  <div class="img1"> <img src="1.png"> </div>
  <div class="text1">
    <!-- 原有文本内容 -->
  </div>
</div>
<!-- 其余img2、img3、img4都按照这个格式修改，分别对应grid-area: img2、img3、img4 -->

第二步：修改CSS样式 #

基础修复 #

/* 先改container高度，避免溢出 */
.container {
  height: auto;
  min-height: 100vh;
}

/* 统一修改所有文本的基础样式 */
[class^="text"] {
  display: none;
  position: absolute; /* 新增，让bottom:0生效 */
  z-index: 10; /* 新增，保证文本层级比图片高 */
  width: 100%; /* 新增，保证文本宽度适配容器 */
  box-sizing: border-box; /* 新增，padding不会撑宽容器 */
  background-color: rgba(128, 128, 128, 0.8);
  bottom: 0px;
}

/* 修改触发逻辑，父容器hover时显示文本，同时加:active适配移动端点击 */
.grid-item:hover [class^="text"],
.grid-item:active [class^="text"] {
  display: block;
  color: #000000;
  font-weight: 600;
  padding: 10px;
}

/* 给grid-item加相对定位，作为文本的定位父级 */
.grid-item {
  position: relative;
}

可选优化（避免闪烁更稳定） #

如果还是有偶发闪烁，可以把display: none/block换成opacity + visibility控制，兼容性更好：

[class^="text"] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease; /* 还可以加过渡效果更丝滑 */
  /* 其他原有属性保留 */
}

.grid-item:hover [class^="text"],
.grid-item:active [class^="text"] {
  opacity: 1;
  visibility: visible;
  /* 其他原有属性保留 */
}

第三步：移动端额外优化 #

如果需要点击后文本保持显示，可以给所有img元素添加tabindex="0"属性，同时补充:focus触发规则：

.grid-item:focus-within [class^="text"] {
  display: block; /* 对应用opacity的话就改opacity和visibility */
}

这样移动端点击图片后，图片获得焦点，文本会一直显示，点击页面其他位置才会消失。

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