如何解决鼠标悬停触发的关联div内容无法交互的问题

问题根源在于你使用了相邻兄弟选择器#account:hover+#account_container，只有当鼠标悬停在#account元素上时，#account_container才会显示。当鼠标从#account移到#account_container上时，#account的hover状态消失，容器也就跟着隐藏了。

修复方案（CSS实现，推荐） #

把#account和#account_container放到同一个父容器中，通过父容器的hover状态来控制子容器的显示/隐藏，这样鼠标在父容器范围内（包括弹出的容器）时，都会保持hover状态。

修改后的CSS代码

/* 父容器设置相对定位，作为绝对定位容器的参考 */
.account-wrapper {
  position: relative;
  display: inline-block; /* 避免父容器占满整行 */
}

#account_container {
  position: absolute;
  display: none;
  top: 100%; /* 相对于父容器底部定位，比固定百分比更可靠 */
  right: 0;
  background-color: #e6e6e6;
  border-radius: 7px;
  width: 200px; /* 用固定宽度比百分比更稳定，可按需调整 */
}

/* 父容器hover时显示子容器 */
.account-wrapper:hover #account_container {
  display: block;
}

#account_container li {
  list-style-type: none;
  display: inline-block;
  color: #000000;
  font-size: 117%;
  margin-right: -1%;
}

/* 原代码多个元素用了相同id="li"，不符合HTML规范，改为class */
.li-item {
  text-align: right;
  margin: 15% 5% 5% 5%;
}

.li-item img {
  margin-left: 6%;
  margin-bottom: -3%;
}

修改后的HTML代码

<div class="account-wrapper">
  <div id="account"><img src="https://via.placeholder.com/50" id="user" class="icon" /></div>

  <div id="account_container">
    <ul>
      <a href="">
        <div class="li-item">
          <li>سلام</li><img src="https://via.placeholder.com/50" />
        </div>
      </a>
      <a href="">
        <div class="li-item">
          <li>سفارش ها</li><img src="https://via.placeholder.com/50" />
        </div>
      </a>
      <a href="">
        <div class="li-item">
          <li>علاقه مندی ها</li><img src="https://via.placeholder.com/50" />
        </div>
      </a>
      <a href="">
        <div class="li-item">
          <li>خروج</li><img src="https://via.placeholder.com/50" />
        </div>
      </a>
    </ul>
  </div>
</div>

额外说明 #

• 原代码中#account的display: relative是错误写法，正确属性是position: relative，这里把相对定位放到父容器更合理。
• HTML中id必须唯一，原代码重复使用id="li"不符合规范，因此改为class.li-item。
• 调整#account_container的定位参数，相对于父容器定位比固定百分比更适配不同屏幕场景。

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