网页文件资源管理器开发：实现hover时子元素背景铺满父容器

我要做网页版文件资源管理器，希望鼠标悬停在file-container元素上时，背景色能铺满整个父容器，但目前只能实现局部背景效果。

我的HTML结构如下：

<div className="folder" onClick={() => handleTogglerotation("folder")}>
    <!-- some svg goes here -->
    <p className="subtitle">folder1</p>
</div>
<div className="folder-content">
    <div className="line"></div>
    <div className="file-section">
        <div className="file-container">
            <!-- some svg goes here -->
            </svg>
            <p>file1.md</p>
        </div>
        <div className="file-container">
            <!-- some svg goes here -->
            <p>file2.md</p>
        </div>
    </div>
</div>

之前试过两种思路，但效果都不理想：

• 通过z-index让file-container覆盖line并设置宽度占满父容器
• 用calc()计算file-container宽度

最优方案 #

核心思路是让file-container的视觉范围覆盖侧边line的位置，同时保证内部内容的布局不受影响，推荐两种实现方式：

方式一：整合侧边线到file-container（更简洁）

移除独立的line元素，用CSS伪元素实现侧边线，同时让file-container占满父容器宽度：

/* 父容器确保宽度铺满 */
.folder-content, .file-section {
  width: 100%;
}

/* 文件项容器设置宽度100%，预留侧边线位置 */
.file-container {
  width: 100%;
  padding-left: 24px; /* 预留侧边线的空间 */
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 用伪元素实现左侧线条 */
.file-container::before {
  content: '';
  position: absolute;
  left: 8px; /* 调整线条位置 */
  top: 50%;
  transform: translateY(-50%);
  height: 60%; /* 线条高度，可按需调整 */
  width: 2px;
  background-color: #ccc;
}

/* 悬停时背景铺满整个容器 */
.file-container:hover {
  background-color: #f5f5f5;
}

方式二：保留原有line元素，调整偏移量

如果要保留独立的line，通过负margin让file-container覆盖线条区域，同时用padding修正内部内容位置：

.folder-content {
  position: relative;
  width: 100%;
}

/* 侧边线绝对定位 */
.line {
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ccc;
  z-index: 1;
}

/* 文件区域留出侧边线位置 */
.file-section {
  margin-left: 28px;
  width: calc(100% - 28px);
}

/* 文件容器向左偏移覆盖线条区域，内部内容留padding */
.file-container {
  width: 100%;
  margin-left: -28px;
  padding-left: 28px;
  position: relative;
  z-index: 2; /* 确保在侧边线之上 */
  cursor: pointer;
  transition: background-color 0.2s;
}

.file-container:hover {
  background-color: #f5f5f5;
}

这两种方式都能实现悬停时背景色铺满整个父容器的效果，第一种结构更简洁，推荐优先使用。

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