如何实现hover锚点元素时定位其父容器外的目标元素？

问题背景 #

当hover嵌套在.container内的<a>标签时，需要修改完全独立的.target-container内的<p>标签样式——由于CSS选择器只能关联有DOM结构关系（父子、兄弟）的元素，确实无法实现跨独立容器的hover触发，必须通过JavaScript完成。

实现方案 #

方案1：原生JS直接操作样式

适合简单场景，直接通过事件监听修改目标元素的行内样式：

<div class="container">
  <div>
    <ul>
      <li><a href="#" class="hover-trigger">hover me</a></li>
    </ul>
  </div>
</div>

<div class="target-container">
  <p id="target-element">Target Element</p>
</div>

<script>
// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const trigger = document.querySelector('.hover-trigger');
  const target = document.getElementById('target-element');

  // 鼠标移入：修改样式
  trigger.addEventListener('mouseover', () => {
    target.style.fontSize = '1.2rem';
    target.style.color = '#ff4444';
  });

  // 鼠标移出：恢复默认样式
  trigger.addEventListener('mouseout', () => {
    target.style.fontSize = '';
    target.style.color = '';
  });
});
</script>

方案2：CSS类切换（推荐）

将样式逻辑与JS分离，更易维护，只需通过JS添加/移除CSS类：

/* 定义激活状态的样式 */
#target-element.active {
  font-size: 1.2rem;
  color: #ff4444;
  font-weight: 600;
}

<!-- HTML结构同方案1 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  const trigger = document.querySelector('.hover-trigger');
  const target = document.getElementById('target-element');

  trigger.addEventListener('mouseover', () => target.classList.add('active'));
  trigger.addEventListener('mouseout', () => target.classList.remove('active'));
});
</script>

方案3：jQuery简化写法（若项目已引入jQuery）

代码更简洁，适合已有jQuery依赖的项目：

$(document).ready(() => {
  $('.hover-trigger').hover(
    () => $('#target-element').addClass('active'),
    () => $('#target-element').removeClass('active')
  );
});

注意事项 #

• 务必确保DOM加载完成后再执行JS，避免出现找不到元素的问题；
• 若存在多个触发/目标元素，可使用事件委托（如监听.container的鼠标事件，判断触发元素是否为目标<a>），减少事件绑定数量，提升性能。

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