嘿，针对你给出的DOM结构，我给你两种实用的实现方案，你可以根据需求选择：

首先先明确你的基础HTML结构：

<div class="main"> 
  <div class="parent"> 
    <div class="content-1"> A </div> 
  </div> 
  <div class="content-2"> B </div> 
</div>

方案一：纯CSS实现（近似需求） #

如果可以接受鼠标悬停在content-1所在的parent容器范围内时就触发content-2的样式变化，那纯CSS就能搞定。因为parent和content-2是同级相邻元素，我们可以用相邻兄弟选择器：

/* 当悬停在.parent上时，给相邻的.content-2添加样式 */
.parent:hover + .content-2 {
  background-color: #f0f0f0;
  color: blue;
  padding: 8px;
  /* 这里替换成你需要的具体样式 */
}

这个方案的好处是不用写JS，性能更好，但触发范围是整个parent容器，而不只是content-1元素本身。

方案二：JavaScript实现（精准需求） #

如果必须严格只有鼠标悬停在content-1元素上时才给content-2加样式，那纯CSS就做不到了（因为CSS目前没有父选择器，没法从子元素的hover状态反向影响父元素的兄弟元素）。这时候用JS来监听事件就很靠谱：

首先写JS逻辑：

// 获取目标元素
const content1 = document.querySelector('.content-1');
const content2 = document.querySelector('.content-2');

// 鼠标进入content1时，给content2添加样式类
content1.addEventListener('mouseenter', () => {
  content2.classList.add('hover-active');
});

// 鼠标离开content1时，移除content2的样式类
content1.addEventListener('mouseleave', () => {
  content2.classList.remove('hover-active');
});

然后在CSS里定义这个样式类的具体样式：

.hover-active {
  background-color: #ffeaea;
  color: red;
  border: 1px solid #ff6b6b;
  /* 这里写你需要的样式 */
}

这个方案能精准控制触发条件，只有hover content-1的时候才会生效，灵活性更高。

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