如何实现鼠标悬停叠加文本时同步改变图片Opacity

这里有三种可行的解决思路，根据需求选择即可：

方法一：利用父容器的hover事件（纯CSS，最简单） #

因为图片和文本都包裹在.main容器里，给父容器设置hover状态后，鼠标悬停在容器内任何区域（包括文本）时，都会触发图片透明度变化。无需调整HTML结构，仅修改CSS：

.main {
  background-color: black;
  opacity: 1;
  position: relative; /* 让文本的绝对定位基于父容器 */
}

.image {
  width: 20%;
  opacity: .5;
  transition: opacity 0.3s; /* 可选，添加过渡动画让变化更平滑 */
}

/* 父容器hover时修改图片透明度 */
.main:hover .image {
  opacity: 1;
}

.text {
  opacity: 1;
  position: absolute;
  font-size: 800%;
  color: white;
  top: 20%;
  left: 6%;
  pointer-events: auto; /* 确保文本能触发hover事件 */
}

HTML结构保持不变：

<div class="main">
  <img class="image" src="https://via.placeholder.com/300" alt="" />
  <p class="text">lite text</p>
</div>

方法二：使用CSS兄弟选择器（需调整HTML结构） #

如果只想让文本hover时触发图片变化，可调整HTML结构，将文本放在图片前，再用兄弟选择器控制图片：

修改后的HTML：

<div class="main">
  <p class="text">lite text</p>
  <img class="image" src="https://via.placeholder.com/300" alt="" />
</div>

对应的CSS：

.main {
  background-color: black;
  opacity: 1;
  position: relative;
}

.image {
  width: 20%;
  opacity: .5;
  transition: opacity 0.3s;
}

.text {
  opacity: 1;
  position: absolute;
  font-size: 800%;
  color: white;
  top: 20%;
  left: 6%;
  pointer-events: auto;
}

/* 文本hover时，选择后面的图片元素修改透明度 */
.text:hover + .image {
  opacity: 1;
}

方法三：JavaScript监听事件（灵活度最高） #

如果需要更复杂的交互逻辑，可通过JavaScript监听文本的鼠标事件，手动修改图片透明度：

<div class="main">
  <img class="image" src="https://via.placeholder.com/300" alt="" />
  <p class="text">lite text</p>
</div>

<script>
const textEl = document.querySelector('.text');
const imageEl = document.querySelector('.image');

// 鼠标悬停文本时，设置图片透明度为1
textEl.addEventListener('mouseover', () => {
  imageEl.style.opacity = '1';
});

// 鼠标离开文本时，恢复图片透明度为0.5
textEl.addEventListener('mouseout', () => {
  imageEl.style.opacity = '0.5';
});
</script>

CSS可保留原有图片hover效果，同时添加过渡动画：

.main {
  background-color: black;
  opacity: 1;
  position: relative;
}

.image {
  width: 20%;
  opacity: .5;
  transition: opacity 0.3s;
}

.image:hover {
  opacity: 1;
}

.text {
  opacity: 1;
  position: absolute;
  font-size: 800%;
  color: white;
  top: 20%;
  left: 6%;
}

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