CSS实现鼠标悬停外部a.link时显示text-info内嵌套div的问题

我来帮你理一理这个问题——纯CSS实现悬停显示嵌套元素的关键，其实在于HTML结构和CSS选择器的匹配度，你的现有代码没生效，大概率是选择器的逻辑和实际DOM结构不匹配。

问题分析 #

你写的a.link:hover ~ .text-info #economics是通用兄弟选择器，它只能匹配两种情况的元素：

• 和a.link处于同一父容器
• 并且在a.link的DOM顺序之后
  如果你的.text-info是a.link的父元素的子元素，或者在DOM结构里位置更靠前，这个选择器自然无效。

可行的纯CSS方案（需匹配DOM结构） #

情况1：.text-info是a.link的同级兄弟（且在link之后）

先调整HTML结构为：

<div class="content-group">
  <a href="#" class="link economics-link">查看经济信息</a>
  <a href="#" class="link workforce-link">查看劳动力信息</a>
  <div class="text-info">
    <div id="economics">这里是经济相关的嵌套内容</div>
    <div id="workforce">这里是劳动力相关的嵌套内容</div>
  </div>
</div>

对应的CSS：

/* 默认隐藏目标div */
#economics, #workforce {
  display: none;
}

/* 悬停对应link时，显示text-info里的目标div */
a.economics-link:hover ~ .text-info #economics {
  display: block;
}

a.workforce-link:hover ~ .text-info #workforce {
  display: block;
}

情况2：.text-info是a.link父容器的同级兄弟

如果你的结构是这样：

<div class="link-wrapper">
  <a href="#" class="link">悬停我显示内容</a>
</div>
<div class="text-info">
  <div id="economics">嵌套内容</div>
</div>

可以通过父容器的hover来触发：

#economics, #workforce {
  display: none;
}

.link-wrapper:hover + .text-info #economics {
  display: block;
}

如果DOM结构无法调整（极简JS辅助） #

如果你的.text-info和a.link的层级关系太复杂（比如一个在头部，一个在页面底部），纯CSS确实做不到。这时候给你一个零门槛的JS方案，不用框架，复制就能用：

<!-- 在link上添加鼠标事件 -->
<a href="#" class="link" onmouseover="showDiv('economics')" onmouseout="hideDiv('economics')">悬停显示经济信息</a>

<div class="text-info">
  <div id="economics">经济内容</div>
</div>

<script>
function showDiv(id) {
  document.getElementById(id).style.display = 'block';
}
function hideDiv(id) {
  document.getElementById(id).style.display = 'none';
}
</script>

总结 #

纯CSS实现的核心是让目标元素和触发元素的DOM结构符合选择器规则，如果结构没法调整，极简JS也能快速解决问题，不用复杂的逻辑。

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