如何在重叠的行与时间轴竖条上触发CSS :hover效果？

核心问题是上层任务行（.task）拦截了鼠标事件，导致下层绝对定位的时间轴竖条（.day）无法触发:hover效果。以下是纯CSS解决方案：

解决方案思路 #

利用pointer-events属性控制元素的鼠标事件接收规则：

• 让任务行本身不拦截鼠标事件，允许事件穿透到下层的时间轴竖条
• 保留任务栏（.task-bar）的鼠标交互能力，确保自身hover效果正常

完整代码示例 #

HTML结构 #

<div class="gantt-container">
  <!-- 时间轴竖条容器 -->
  <div class="timeline">
    <div class="day" style="left: 10%"></div>
    <div class="day" style="left: 20%"></div>
    <div class="day" style="left: 30%"></div>
    <!-- 更多日期竖条 -->
  </div>
  
  <!-- 任务行容器 -->
  <div class="task-list">
    <div class="task">
      <div class="task-bar" style="left: 15%; width: 20%"></div>
    </div>
    <div class="task">
      <div class="task-bar" style="left: 25%; width: 15%"></div>
    </div>
    <!-- 更多任务行 -->
  </div>
</div>

CSS样式 #

.gantt-container {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid #eee;
}

/* 时间轴竖条样式 */
.timeline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.day {
  position: absolute;
  height: 100%;
  width: 1px;
  background-color: #ddd;
  /* 确保竖条能接收鼠标事件 */
  pointer-events: auto;
}

.day:hover {
  background-color: #ff4444;
  width: 2px;
  z-index: 1;
}

/* 任务行样式 */
.task-list {
  position: relative;
  width: 100%;
  height: 100%;
}

.task {
  height: 50px;
  margin: 10px 0;
  position: relative;
  /* 让任务行不拦截鼠标事件，允许穿透到下层时间轴 */
  pointer-events: none;
}

.task-bar {
  position: absolute;
  height: 100%;
  background-color: #4CAF50;
  border-radius: 4px;
  /* 恢复任务栏的鼠标交互能力 */
  pointer-events: auto;
}

.task-bar:hover {
  background-color: #45a049;
  transform: translateY(-1px);
}

关键说明 #

1. pointer-events: none：给.task设置该属性后，任务行本身不会捕获鼠标事件，鼠标操作会直接作用到下层的.day元素，触发其hover高亮。
2. pointer-events: auto：给.task-bar重置该属性，确保任务栏自身的hover、点击等交互正常工作。
3. 层级控制：时间轴容器.timeline用绝对定位占满整个甘特图区域，确保.day竖条能覆盖对应日期的全高度范围。

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