非同源父元素的Div hover时显示另一个Div的实现方法

问题分析 #

你遇到的问题本质是CSS选择器的局限性：CSS的相邻兄弟选择器(+)和通用兄弟选择器(~)只能作用于同一父级下的后续兄弟元素。如果.test和.hover-content中间隔了其他内容，或者根本不在同一个父容器里，纯CSS完全无法建立这两个元素之间的悬停关联——因为CSS没有“向上遍历DOM树”或者“跨父级选择”的能力。

解决方案：用JavaScript实现 #

既然CSS搞不定，咱们用JavaScript来监听悬停事件，直接控制目标元素的显示状态，这是最可靠的方案。下面给你几种不同场景下的实现方式：

1. 基础单元素版 #

如果只有一对触发元素和内容元素，直接获取元素绑定事件即可：

首先给.hover-content设置默认隐藏的CSS：

.hover-content {
  display: none;
}

然后添加原生JavaScript代码：

// 获取触发元素和目标内容元素
const hoverTrigger = document.querySelector('.hover-me');
const hoverContent = document.querySelector('.hover-content');

// 鼠标悬停时显示内容
hoverTrigger.addEventListener('mouseover', () => {
  hoverContent.style.display = 'block';
});

// 鼠标离开时隐藏内容
hoverTrigger.addEventListener('mouseout', () => {
  hoverContent.style.display = 'none';
});

2. 更优雅的类切换版 #

推荐用CSS类来控制显示状态，而不是直接修改style属性，这样样式和逻辑分离，更易维护：

CSS部分：

.hover-content {
  display: none;
}
/* 添加类时显示 */
.hover-content.show {
  display: block;
}

JavaScript部分：

const hoverTrigger = document.querySelector('.hover-me');
const hoverContent = document.querySelector('.hover-content');

hoverTrigger.addEventListener('mouseover', () => {
  hoverContent.classList.add('show');
});

hoverTrigger.addEventListener('mouseout', () => {
  hoverContent.classList.remove('show');
});

3. 多元素复用版 #

如果你有好几组这样的悬停触发-内容对，可以用data-*属性来关联它们，实现代码复用：

HTML结构调整（给触发元素加data-target，对应内容元素的id）：

<div class="test">
  <div class="hover-me" data-target="content1"><p>Hover 1</p></div>
</div>
<!-- 其他任意内容 -->
<div class="hover-content" id="content1"><p>Hovered content 1</p></div>

<div class="test">
  <div class="hover-me" data-target="content2"><p>Hover 2</p></div>
</div>
<!-- 其他任意内容 -->
<div class="hover-content" id="content2"><p>Hovered content 2</p></div>

CSS还是用类控制的写法，然后JavaScript批量绑定事件：

// 给所有触发元素绑定悬停事件
document.querySelectorAll('.hover-me').forEach(trigger => {
  trigger.addEventListener('mouseover', () => {
    const targetId = trigger.dataset.target;
    document.getElementById(targetId).classList.add('show');
  });
  
  trigger.addEventListener('mouseout', () => {
    const targetId = trigger.dataset.target;
    document.getElementById(targetId).classList.remove('show');
  });
});

总结 #

纯CSS在这种跨父级、非相邻兄弟元素的悬停联动场景下是无能为力的，JavaScript是唯一可行的方案。上面的几种写法可以根据你的实际场景选择，类切换和多元素复用的方式更推荐在实际项目中使用，扩展性更好。

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