如何通过CSS在hover兄弟元素时选中其他div内的目标元素？

在你当前的DOM结构下，纯CSS原生选择器（不含:has()）无法实现这个需求，原因如下：

CSS的选择器体系仅支持向下遍历（父元素到子元素）和向后遍历（兄弟元素到后续兄弟元素），没有原生的“反向选择器”可以选中当前元素之前的兄弟节点或祖先节点的前置子元素。结合你的结构来看：

• 第一个<h3>位于最外层父容器的第三个<div>子元素内
• 目标<img>位于最外层父容器的第二个<div>子元素内
• 当hover第三个<div>里的<h3>时，CSS无法“回溯”到前面的第二个<div>及其内部的<img>元素。

可行方案 #

1. 重构HTML结构（最稳妥）

将需要关联的<img>和<h3>放到同一个父容器中，这样就能用基础CSS选择器实现交互：

<div class="card">
  <a href="">
    <figure>
      <img src="https://picsum.photos/200/300" />
    </figure>
  </a>
  <div class="content">
    <a href="">
      <h3>Hover me.</h3>
    </a>
    <p>Lorem.</p>
    <p>Ipsum.</p>
  </div>
</div>
<!-- 第二个卡片同理 -->

对应的CSS：

/* 仅hover h3时，选中同容器内的img */
.card:has(.content h3:hover) > a img {
  border: 2px solid #ff4444;
}

2. 使用CSS :has()选择器（保留原DOM结构）

如果你不需要兼容IE等旧版浏览器，:has()选择器可以实现反向关联，它允许父元素基于子元素的状态来选中其他节点：

/* 最外层div中，当第三个子div内的h3被hover时，选中第二个子div内的img */
div:has(> div:nth-child(3) h3:hover) > div:nth-child(2) img {
  border: 2px solid #2196f3;
  /* 自定义你的样式 */
}

注意：:has()选择器目前已被Chrome、Firefox（121+）、Safari等现代浏览器支持，但旧版浏览器无法兼容。

3. JavaScript实现（保留原DOM结构）

如果需要兼容旧版浏览器，JavaScript是更可靠的方案：

const targetH3 = document.querySelector('div:nth-child(3) h3');
const targetImg = document.querySelector('div:nth-child(2) img');

targetH3.addEventListener('mouseover', () => {
  targetImg.classList.add('hover-style');
});

targetH3.addEventListener('mouseout', () => {
  targetImg.classList.remove('hover-style');
});

对应的CSS：

.hover-style {
  border: 2px solid #4caf50;
}

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