鼠标悬停span元素时dropdown menu不显示的问题求助

问题描述 #

鼠标悬停在<span>元素（替换为<div>或<p>后同理）上时，预期.user-list下拉菜单会显示，但实际未生效。相关代码如下：

原CSS代码 #

.user {
  position: relative;
  top: 9px;
  margin-left: 50px;
}

.user .user-name {
  position: relative;
  top: -20px;
  margin-left: 25px;
  color: #1E1E2D;
}

.user .user-name::before {
  content: "";
  border: 5px solid transparent;
  width: 5px;
  height: 10px;
  border-top-color: black;
  position: relative;
  top: 14px;
  left: -3px;
}

.user span:hover .user-list {
  display: block;
}

.user ul {
  position: absolute;
  background-color: white;
  top: 45px;
  left: 70px;
  width: 200px;
  padding: 18px;
  box-shadow: -6px 13px 20px 8px #eee;
  display: none;
  list-style-type: none;
  z-index: 1;
}

原HTML代码 #

<div class="nav">
  <div class="user">
    <img src="assest/user.png" alt="" srcset="">
    <span id="show" class="user-name">Name</span>
    <ul class="user-list">
      <li><a href="">Home</a></li>
      <li><a href="">Account</a></li>
      <li><a href="">LogOut</a></li>
    </ul>
  </div>
</div>

问题原因 #

当前CSS选择器.user span:hover .user-list是后代选择器，它会尝试选中被悬停的<span>元素内部的.user-list。但从HTML结构来看，.user-list是和<span>同级的兄弟元素，并非<span>的后代，因此该选择器无法匹配到目标元素，导致悬停触发失效。

解决方案 #

提供两种可行的修改方案，根据需求选择：

方案1：使用相邻兄弟选择器（仅悬停用户名时触发） #

将原选择器.user span:hover .user-list替换为：

.user .user-name:hover + .user-list {
  display: block;
}

+是相邻兄弟选择器，会选中.user-name元素紧挨着的下一个同级元素（也就是.user-list），无论你把<span>换成<div>还是<p>，只要保留.user-name类，这个选择器都能生效。

方案2：绑定到父元素（提升交互体验） #

如果希望鼠标悬停在整个用户区域（包括头像）都能触发下拉菜单，可以把悬停事件绑定到.user父元素：

.user:hover .user-list {
  display: block;
}

这种方式交互更友好，用户无需精准悬停在文字上就能触发菜单。

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