如何实现鼠标从列表标题移至关联信息框时保持框体可见？

这个问题我太熟悉了！核心原因是你当前的CSS依赖<li>的hover状态来控制相邻的.box显示，但当鼠标从<li>移到.box时，<li>的hover状态直接消失，.box自然就被隐藏了。另外先提个重要的点：你当前的HTML结构不符合规范——<ul>的直接子元素只能是<li>，直接放<div class="box">是无效的，这也会导致一些奇怪的交互问题，得先修正。

下面给你两种靠谱的解决思路，优先推荐第一种：

方法1：调整HTML结构（规范且稳定） #

把.box放到对应的<li>内部，这样整个标题+信息框都属于同一个<li>容器，hover这个容器时就能保持信息框的显示状态。

修正后的HTML #

<ul class="nav">
  <li class="pt pt1 active" data-cont="r1">
    <p>إصدار رخصة استثمار للمستثمر الأجنبي</p>
    <!-- 将信息框移入li内部 -->
    <div class="box">
      <div class="steps">
        <div>
          <p>تضاف قيمة 10,000ر.س للاشتراك في خدمات مراكز علاقات المستثمرين بوزارة الاستثمار في السنة الأولى و 60,000 ر.س في السنوات التالية / سنة </p>
        </div>
        <div>
          <p>هذا الإجراء يتطلب إنشاء حساب جديد في حال عدم وجوده</p>
        </div>
        <div>
          <p>هذا الإجراء مؤتمت</p>
        </div>
        <div>
          <p>هذا الإجراء يتطلب الدفع</p>
        </div>
      </div>
    </div>
  </li>
</ul>

对应的CSS修改 #

ul { margin:0; padding:0; list-style: none; }
/* 初始隐藏信息框，添加过渡动画更顺滑 */
ul li .box { 
  opacity: 0; 
  visibility: hidden; 
  max-height: 0; 
  transition: all 0.3s ease;
}
/* hover整个li时，显示内部的信息框 */
ul li:hover .box { 
  opacity: 1; 
  visibility: visible; 
  min-height: 200px; 
  max-height: 500px; /* 限制最大高度，避免内容溢出 */
}
.box { 
  background-color: #ccc; 
  padding: 10px; 
  text-align: right; 
  border-radius: 6px; 
  margin-top: 10px; /* 给标题和信息框加个间距 */
}

这样调整后，不管鼠标在标题上还是移到信息框里，<li>的hover状态都会保持，信息框就不会消失了，同时也修正了HTML结构的问题，一举两得。

方法2：CSS后续兄弟+hover联动（不推荐，结构不规范） #

如果暂时不想调整HTML结构（不建议长期这么用），可以通过同时监听<li>和.box的hover状态来实现，但这种方法有个小缺陷：如果标题和信息框之间有间隙，鼠标移动时可能会出现一闪的情况。

修改后的CSS #

ul { margin:0; padding:0; list-style: none; }
ul li + .box { 
  opacity: 0; 
  visibility: hidden; 
  max-height: 0; 
  transition: all 0.3s ease;
}
/* 当li被hover，或者box本身被hover时，显示box */
ul li:hover + .box,
ul li + .box:hover { 
  opacity: 1; 
  visibility: visible; 
  min-height: 200px; 
  max-height: 500px;
}
.box { 
  background-color: #ccc; 
  padding: 10px; 
  text-align: right; 
  border-radius: 6px; 
}

注意事项 #

这种方法依赖相邻兄弟选择器，而且HTML结构不符合<ul>的规范，后续维护容易出问题，所以优先选方法1。

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