基于CSS选择器实现LI悬停对应显示指定Overlay的方案问询

你之前遇到嵌套后同时显示两个overlay的问题，核心是结构设计不合理，导致hover触发范围覆盖了多个浮层。下面提供两种可靠的实现方式：

方案1：同级结构 + 兄弟选择器 #

把每个overlay放在对应LI的同级位置，用CSS兄弟选择器关联hover状态：

HTML 结构 #

<ul style="position: relative; list-style: none; padding: 0;">
  <li class="trigger-one">One</li>
  <div class="overlay overlay-one">Overlay One 内容</div>
  
  <li class="trigger-two" style="margin-top: 20px;">Two</li>
  <div class="overlay overlay-two">Overlay Two 内容</div>
</ul>

CSS 样式 #

/* 默认隐藏所有浮层 */
.overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 80px;
  background: #f0f0f0;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* 悬停One的LI时，显示对应的overlay-one */
.trigger-one:hover + .overlay-one {
  display: block;
}

/* 悬停Two的LI时，显示对应的overlay-two */
.trigger-two:hover + .overlay-two {
  display: block;
}

如果LI和overlay之间有其他元素，把相邻兄弟选择器+换成通用兄弟选择器~即可，但要保证overlay在对应LI的后面。

方案2：子元素结构（更推荐） #

把overlay作为对应LI的直接子元素，这样每个浮层的作用域完全独立，不会互相干扰：

HTML 结构 #

<ul style="position: relative; list-style: none; padding: 0;">
  <li class="trigger trigger-one">
    One
    <div class="overlay overlay-one">Overlay One 内容</div>
  </li>
  <li class="trigger trigger-two" style="margin-top: 20px;">
    Two
    <div class="overlay overlay-two">Overlay Two 内容</div>
  </li>
</ul>

CSS 样式 #

.overlay {
  display: none;
  position: absolute;
  left: 80px;
  background: #f0f0f0;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* 给LI设置相对定位，让overlay相对于它定位 */
.trigger {
  position: relative;
}

/* 悬停One的LI时，显示其子元素overlay-one */
.trigger-one:hover .overlay-one {
  display: block;
}

/* 悬停Two的LI时，显示其子元素overlay-two */
.trigger-two:hover .overlay-two {
  display: block;
}

这种结构下，每个overlay只属于自己的父LI，hover触发时只会显示当前LI下的浮层，彻底避免了之前的同时显示问题。

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