JS hover事件重构建议：列表上方描述内容切换需求咨询

嘿，很高兴你已经用JavaScript搞定了这个效果！不过既然你之前尝试用CSS伪类没成功，我可以给你讲讲纯CSS实现的思路，以及优化JS代码的小技巧，说不定以后能用上～

纯CSS实现思路（为什么之前没成功？） #

你之前用before/after和hover伪类没成，大概率是因为CSS只能选择当前元素之后的兄弟元素/子元素，没法反过来影响前面的元素。原来的HTML结构里description在list上方，所以CSS没法通过list里的span:hover去修改前面的description内容。

要纯CSS实现，得先调整HTML结构，把list放在description前面，然后利用兄弟选择器~结合伪元素来切换内容：

调整后的HTML #

<div id="list">
  <span id="workfield_1">Workfield_1</span> |
  <span id="workfield_2">Workfield_2</span>
</div>
<div id="description">This is an awesome content</div>

对应的CSS代码 #

#description {
  position: relative;
  /* 确保描述区域有足够空间，避免内容跳动 */
  min-height: 1.5em;
}

/* 鼠标悬停workfield_1时，覆盖描述内容 */
#workfield_1:hover ~ #description::before {
  content: "这是Workfield_1的专属描述";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #fff; /* 用背景色覆盖原始文字，颜色和页面背景一致 */
}

/* 鼠标悬停workfield_2时，切换对应描述 */
#workfield_2:hover ~ #description::before {
  content: "这是Workfield_2的专属描述";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
}

这个方案的优点是不用写JS，但缺点是新增workfield时得手动加对应的CSS规则，适合内容固定的场景。

JavaScript代码优化建议 #

你已经用JS实现了功能，这里给你一个更易维护的写法：去掉内联事件（onMouseOver/onMouseOut），用事件监听+data-*属性存储描述内容，这样新增项目时不用修改JS代码，只需要加HTML就行：

优化后的HTML #

<div id="description">This is an awesome content</div>
<div id="list">
  <span class="workfield" data-desc="This is workfield 1's description">Workfield_1</span> |
  <span class="workfield" data-desc="This is workfield 2's description">Workfield_2</span>
</div>

优化后的JavaScript #

// 获取描述元素并保存原始文本
const description = document.getElementById('description');
const originalText = description.textContent;

// 给所有workfield绑定事件
document.querySelectorAll('.workfield').forEach(item => {
  item.addEventListener('mouseover', () => {
    // 从data属性读取对应描述
    description.textContent = item.dataset.desc;
  });
  item.addEventListener('mouseout', () => {
    // 恢复原始文本
    description.textContent = originalText;
  });
});

这种写法更符合现代JS的编码规范，维护起来也更省心～

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