带悬浮文本的<a>标签hover时，图片透明度切换失效问题求助

核心解决思路是将hover触发源从图片切换到包含标题和图片的<a>标签——因为<a>是两者的共同父元素，悬停其内部任意区域都会触发图片的样式变化，同时确保标题的透明度不受影响。

修改后的CSS代码 #

.galleryItem a {
  position: relative; /* 给绝对定位的h4提供正确的定位基准 */
  display: block; /* 让a标签撑满容器，确保悬停区域覆盖整个图片和标题 */
  color: #f5f9e9;
  text-decoration: none;
}

.galleryItem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  filter: opacity(.7);
  transition: .3s;
}

.galleryItem h4 {
  color: #f5f9e9;
  text-align: center;
  position: absolute;
  top: 41%;
  left: 50%;
  font-size: 1.3em;
  transform: translate(-50%, -50%);
  vertical-align: middle;
  z-index: 10;
  text-shadow: 0px 0px 10px black;
  opacity: 1; /* 明确锁定标题透明度，防止意外变化 */
}

/* 悬停a标签时触发图片透明度变化 */
.galleryItem a:hover img {
  filter: opacity(1);
}

保留原结构的HTML代码 #

<div class="galleryItem">
  <a href="#">
    <h4>The Combinator</h4>
    <img src="img/fwaz.png">
  </a>
</div>

关键修改说明 #

1. 给<a>添加position: relative：解决绝对定位的h4脱离文档流后，定位基准错误的问题，确保标题始终悬浮在图片上方。
2. 将hover事件绑定到<a>：替代原来的img:hover，只要鼠标在<a>的范围内（包括悬浮的标题），就会触发图片的透明度切换。
3. 锁定h4的透明度：明确设置opacity: 1，彻底避免标题的透明度受到任何影响。
4. 设置<a>为块级元素：让<a>占据容器的全部空间，保证悬停区域完全覆盖图片和标题的范围。

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