如何在第二个div的a:hover时为上方div内的img添加opacity效果

实现方案 #

CSS本身没有「前面兄弟选择器」，默认无法直接选中某个元素之前的其他元素，你可以根据兼容需求选择以下三种方案：
首先修正你原代码的语法错误：a标签的class属性多写了一个多余引号，基础修正后结构如下：

<div class="hide">
     <img src="/img.png">
</div>
<div class="onhover">
     <a class="onhover_change">hover触发元素</a>
</div>

方案1：使用CSS :has() 选择器（现代浏览器优先） #

无需修改HTML结构，兼容性覆盖Chrome 105+、Edge 105+、Safari 15.4+、Firefox 121+，可满足绝大多数场景需求：

/* 匹配包含被hover的.onhover_change的页面，选中对应.hide下的img */
body:has(.onhover .onhover_change:hover) .hide img {
  opacity: 0.5; /* 可按需调整透明度数值 */
  transition: opacity 0.3s ease; /* 添加过渡效果更顺滑 */
}

方案2：调整HTML结构+兄弟选择器（全浏览器兼容） #

如果需要兼容不支持:has()的旧版浏览器，可以微调HTML结构，用Flex布局调整视觉顺序，配合CSS兄弟选择器实现：

<!-- 新增公共父容器，结构上把.onhover放在.hide前面 -->
<div class="container">
  <div class="onhover">
       <a class="onhover_change">hover触发元素</a>
  </div>
  <div class="hide">
       <img src="/img.png">
  </div>
</div>

对应CSS规则：

.container {
  display: flex;
  flex-direction: column;
}
/* 调整两个div的视觉顺序，让.hide显示在上方 */
.hide {
  order: 1;
}
.onhover {
  order: 2;
}
/* 选中onhover被hover后的相邻兄弟.hide下的img */
.onhover:hover + .hide img {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

如果a标签没有占满整个.onhover容器，只想hover a本身时触发，把上述选择器替换为.onhover:has(.onhover_change:hover) + .hide img即可。

方案3：JavaScript实现（全兼容无需改HTML） #

完全不需要修改原有HTML结构，兼容所有浏览器：

const trigger = document.querySelector('.onhover .onhover_change');
const targetImg = document.querySelector('.hide img');

// 鼠标移入时添加透明度
trigger.addEventListener('mouseenter', () => {
  targetImg.style.cssText = 'opacity: 0.5; transition: opacity 0.3s ease;';
});
// 鼠标移出时恢复
trigger.addEventListener('mouseleave', () => {
  targetImg.style.opacity = '1';
});

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