如何用CSS实现树形节点hover时背景色铺满整行

我明白你的问题啦——现在hover节点时背景只在内容区域显示，没法达到你想要的铺满整行效果。核心问题是当前设置背景的.tree__node-header元素没有占据父容器的全部宽度，再加上父节点的padding限制，导致背景无法延伸到整行。咱们可以通过以下几步修改来搞定：

关键调整步骤 #

1. 移除父节点的内边距限制：把.tree__node原来的padding-left:5px去掉，避免给header的背景区域留空白。
2. 让header撑满整行：给.tree__node-header设置width: 100%，同时用flex布局对齐内部的节点名称和右侧操作按钮，保证元素分布合理的同时，让header成为满宽度的容器。
3. 转移内边距到header：把原来.tree__node的左内边距加到.tree__node-header上，维持原来的缩进视觉效果。

修改后的完整CSS代码 #

.qwc-tree__branch { 
  padding-left: 40px !important; 
  font-size: 12px; 
} 
.tree__root { 
  padding-left: 0 !important; 
} 
.tree__node { 
  list-style-type: none; 
  margin: 0; 
  /* 移除原左内边距，消除背景留白 */
  padding-left: 0; 
  position: relative;
  width: 100%;
} 
.tree__node::before, .tree__node::after { 
  content: ''; 
  left: -20px; 
  position: absolute; 
  right: auto 
} 
.tree__node::before { 
  border-left: 1px dotted #e0e0e0; 
  bottom: 50px; 
  height: 100%; 
  top: 0; 
  width: 1px 
} 
.tree__node::after { 
  border-top: 1px dotted #e0e0e0; 
  height: 20px; 
  top: 15px; 
  width: 25px 
} 
.tree__root>.tree__root-node::before { 
  border: 0; 
} 
.tree__root>.tree__root-node::after { 
  border: 0; 
} 
.tree__node-header {
  /* 让header撑满父容器宽度 */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 替代原tree__node的左内边距，保持缩进 */
  padding-left: 5px;
  /* 增加上下内边距，优化hover交互区域 */
  padding-top: 3px;
  padding-bottom: 3px;
}
.tree__node-header:hover { 
  background-color: lightblue; 
} 
.tree__node-name { 
  display: inline-flex; 
  align-items: center; 
  padding: 0 8px; 
  text-decoration: none 
} 
.tree__node-name--icon { 
  margin: 0 5px 0 3px; 
  color: #1976d2; /* 替换原预处理器变量$primary为具体可识别颜色 */
} 
.tree__node-action { 
  cursor: pointer; 
  margin-right: 15px 
} 
.tree .tree__node:last-child::before { 
  height: 30px 
}

调整思路说明 #

• 移除.tree__node的左内边距后，.tree__node-header可以不受限制地撑满整个li的宽度，不会被父节点的padding挡住背景延伸。
• flex布局让节点名称靠左、操作按钮靠右，既保留了原有布局的视觉层次，又保证header是一个完整的满宽度块级容器。
• 把内边距转移到header上，既维持了原来的缩进效果，又让hover背景能覆盖从左到右的整个行区域。

这样修改后，你hover节点的时候，背景色就会铺满整行啦！

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