如何实现CSS多层Hover效果？一级Hover卡片需添加二级Hover

完全可以在现有一级卡片（单选按钮触发）的基础上实现二级hover效果，纯CSS就能搞定，不用额外JS。结合你当前的实现逻辑，具体方案如下：

1. HTML结构设计 #

把一级卡片嵌套在用户名容器内，二级卡片再嵌套在一级卡片的目标元素（比如出生日期模块）里，层级清晰便于CSS控制：

<div class="user-container">
  <!-- 单选按钮控制一级卡片显示 -->
  <input type="radio" id="user-card-toggle" name="card-toggle" class="card-toggle">
  <label for="user-card-toggle" class="username">JackFV</label>
  
  <!-- 一级信息卡片 -->
  <div class="user-card">
    <p>邮箱：jack@example.com</p>
    <div class="dob-item">
      <span>d.o.b：1990-01-01</span>
      <!-- 二级详情卡片 -->
      <div class="dob-tooltip">
        <p>农历：己巳年十一月十五</p>
        <p>星座：摩羯座</p>
      </div>
    </div>
  </div>
</div>

2. CSS样式实现 #

先通过单选按钮的:checked状态控制一级卡片显示，再在一级卡片可见的前提下，给目标元素加:hover触发二级卡片：

/* 隐藏单选按钮 */
.card-toggle {
  position: absolute;
  opacity: 0;
}

/* 用户名样式 */
.username {
  cursor: pointer;
  color: #2c71d8;
  text-decoration: underline;
}

/* 一级卡片默认隐藏 */
.user-card {
  position: absolute;
  top: 22px;
  left: 0;
  width: 200px;
  padding: 15px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
  z-index: 10;
}

/* 单选按钮选中时显示一级卡片 */
.card-toggle:checked ~ .user-card {
  display: block;
}

/* 出生日期模块样式 */
.dob-item {
  position: relative;
  margin-top: 10px;
  cursor: help;
}

/* 二级卡片默认隐藏 */
.dob-tooltip {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 10px;
  width: 180px;
  padding: 10px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: none;
  z-index: 20;
}

/* 悬停出生日期时显示二级卡片 */
.dob-item:hover .dob-tooltip {
  display: block;
}

关键逻辑说明 #

• 用单选按钮的:checked状态保持一级卡片显示（直到点击其他单选按钮或页面空白处），避免纯hover触发时鼠标移开就消失的问题，方便操作二级元素
• 二级卡片的触发依赖父元素（.dob-item）的:hover状态，只要一级卡片处于显示状态，鼠标悬停在出生日期上就能弹出二级卡片
• 通过z-index控制层级，确保二级卡片在一级卡片上方显示

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