鼠标悬停一个div使另一个div隐藏的最优方案及问题排查

首先，咱们先揪出你代码里最明显的小问题——CSS语法错误！你写的 .icon:hover + .info { display:none) 里，结尾的右括号是多余的，而且属性值后面没加分号，正确写法应该是：

.icon:hover + .info { display: none; }

这大概率是导致样式不生效的第一个原因。

接下来，咱们聊聊选择器的匹配规则，这是很多人踩坑的点：
你用的 + 是相邻兄弟选择器，它只能选中紧跟在.icon后面的、和它同级的第一个.info元素。如果你的HTML结构里，.info不是.icon的直接下一个同级元素（比如中间夹了其他div），这个选择器就完全不会生效。

针对不同的HTML结构，最优实现方案分这几种：

1. 目标元素是触发元素的直接相邻同级 #

如果你的HTML结构是这样的：

<div class="profile-container">
  <div class="icon">你的图标</div>
  <div class="info profile-info-box">要隐藏的信息</div>
</div>

那修正语法后的+选择器就完全够用，再给.icon加个可交互的尺寸（比如宽高），确保鼠标能触发hover：

.icon {
  width: 40px;
  height: 40px;
  cursor: pointer; /* 提示用户这是可交互元素 */
}
.icon:hover + .info {
  display: none;
}

2. 目标元素是触发元素的非直接相邻同级 #

如果.icon和.info之间还有其他元素，就换成通用兄弟选择器~，它能选中触发元素后面所有同级的目标元素：

.icon:hover ~ .info {
  display: none;
}

3. 触发元素和目标元素是嵌套/父子关系 #

如果.info嵌套在.icon里面，或者两者共享同一个父容器，用父元素的hover来控制会更稳妥（避免选择器层级限制）：
比如父容器hover时隐藏.info：

.profile-container:hover .info {
  display: none;
}

或者只在.icon区域hover时生效：

.icon:hover .info {
  display: none;
}

额外排查点：布局影响 #

你提到.profile-info-box是绝对定位的，记得给它的父元素.profile-container加上position: relative，否则绝对定位的元素会相对于整个页面定位，可能出现“显示在下方”的奇怪布局：

.profile-container {
  background: #000;
  height: 400px;
  position: relative; /* 给绝对定位子元素做定位参考 */
}

最后再提个小细节：如果.icon是空元素（没有内容），一定要给它设置宽高或者padding，否则鼠标根本悬停不到这个元素，hover事件自然不会触发~

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