多span元素hover触发对应Div文本显示的实现方案优化咨询

方案一：结构关联 + CSS相邻兄弟选择器 #

这是最精简的纯CSS方案，核心是让每个触发用的span和对应的内容div在DOM里挨在一起，利用CSS兄弟选择器触发显示。

HTML结构：

<span class="hover-trigger">触发文本1</span>
<div class="hover-content">对应的内容1</div>

<span class="hover-trigger">触发文本2</span>
<div class="hover-content">对应的内容2</div>

CSS代码：

/* 默认隐藏所有内容块 */
.hover-content {
  display: none;
}

/* 悬停span时，显示紧跟它的内容div */
.hover-trigger:hover + .hover-content {
  display: block;
}

如果内容div和span不是直接相邻，但在同一个父容器里且在span后面，把+换成~通用兄弟选择器就行。

方案二：数据属性绑定 + CSS（支持跨结构关联） #

如果DOM结构没法让span和内容div相邻，用data-*属性把两者绑定起来，配合CSS的:has()选择器（现代浏览器支持）。

HTML结构：

<span class="hover-trigger" data-target="content1">触发文本1</span>
<span class="hover-trigger" data-target="content2">触发文本2</span>

<div class="hover-content" id="content1">内容1</div>
<div class="hover-content" id="content2">内容2</div>

CSS代码：

.hover-content {
  display: none;
}

/* 悬停指定data-target的span时，显示对应id的内容div */
.hover-trigger:hover[data-target="content1"] ~ #content1,
.hover-trigger:hover[data-target="content2"] ~ #content2 {
  display: block;
}

如果有大量元素，用Sass/LESS预处理器循环可以避免重复写选择器：

@contentList: content1, content2;

.hover-content {
  display: none;
}

@each $item in @contentList {
  .hover-trigger:hover[data-target="#{$item}"] ~ ##{$item} {
    display: block;
  }
}

方案三：极简JS方案（兼容旧浏览器） #

如果要兼容不支持:has()的旧浏览器，用几行JS就能搞定，还能支持更灵活的DOM结构。

HTML结构同方案二，JS代码：

// 事件委托，只绑定一次事件
document.addEventListener('mouseover', e => {
  const trigger = e.target.closest('.hover-trigger');
  if (trigger) {
    document.getElementById(trigger.dataset.target).style.display = 'block';
  }
});

document.addEventListener('mouseout', e => {
  const trigger = e.target.closest('.hover-trigger');
  if (trigger) {
    document.getElementById(trigger.dataset.target).style.display = 'none';
  }
});

精简写法建议 #

1. 优先用方案一，DOM结构相邻的情况下纯CSS实现，代码最少，性能最好。
2. 用数据属性时统一命名规则，比如data-target对应内容div的id，避免混乱。
3. 大量元素场景用预处理器循环，减少重复代码。
4. JS方案用事件委托，减少事件绑定数量，提升性能。

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