jQuery实现：hover button-a/button-b时仅为main-div内的div#text切换类

嘿，这个需求其实很好解决，咱们可以从纯CSS轻量方案和JavaScript灵活方案两个方向入手，确保只影响main-div内部的#text元素，完全不会波及页面上其他同名元素。

如果你的HTML结构是button-a/button-b和#text都直接在main-div内部，咱们可以利用CSS的后代选择器和:hover伪类来实现，代码非常简洁：

/* 仅当main-div内的button-a或button-b被悬浮时，修改同容器内的#text样式 */
.main-div .button-a:hover ~ #text,
.main-div .button-b:hover ~ #text {
  /* 这里替换成你要切换的类的样式，比如： */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

注意：CSS的~是相邻兄弟选择器，要求#text在按钮的后面（同一层级）。如果按钮和#text的层级关系更复杂（比如按钮在子容器里），纯CSS可能就不太好实现了，这时候就需要用JS方案。

这个方案不管你的按钮和#text在main-div里的嵌套关系如何，都能精准生效，而且支持后续动态添加的按钮。

第一步：先看示例HTML结构 #

<div class="main-div">
  <div class="btn-group">
    <button class="button-a">按钮A</button>
    <button class="button-b">按钮B</button>
  </div>
  <div id="text">我是main-div里的目标文本</div>
</div>

<!-- 这个外部的#text不会被影响 -->
<div id="text">我是无关的文本</div>

第二步：核心JS代码（直接绑定事件） #

// 先定位到main-div容器，缩小操作范围
const mainContainer = document.querySelector('.main-div');
// 只在main-div内部找目标#text元素
const targetText = mainContainer.querySelector('#text');

// 给main-div内的两个按钮分别绑定悬浮事件
mainContainer.querySelectorAll('.button-a, .button-b').forEach(button => {
  // 鼠标悬浮时添加类
  button.addEventListener('mouseenter', () => {
    targetText.classList.add('active-class'); // 替换成你的目标类名
  });
  // 鼠标离开时移除类
  button.addEventListener('mouseleave', () => {
    targetText.classList.remove('active-class');
  });
});

进阶版：事件委托（适合动态添加按钮的场景） #

如果你的按钮是后续通过JS动态生成的，用事件委托更高效，不用每次新增按钮都重新绑定事件：

const mainContainer = document.querySelector('.main-div');
const targetText = mainContainer.querySelector('#text');

// 把事件绑定在main-div上，通过事件冒泡判断触发源
mainContainer.addEventListener('mouseenter', (e) => {
  const target = e.target;
  if (target.classList.contains('button-a') || target.classList.contains('button-b')) {
    targetText.classList.add('active-class');
  }
});

mainContainer.addEventListener('mouseleave', (e) => {
  const target = e.target;
  if (target.classList.contains('button-a') || target.classList.contains('button-b')) {
    targetText.classList.remove('active-class');
  }
});

另外要提一句：HTML里的id理论上应该是全局唯一的，不过既然你明确要区分main-div内部的#text，咱们通过容器限定查询的方式就完美解决了这个问题，不会出现全局干扰。

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