如何在HTML中获取树视图，以使其在跨越树的整个宽度的节点上具有悬停效果？

Question

我有一个如下的树状视图。创建悬浮css效果时，它仅适用于子节点宽度。
参见https://jsfiddle.net/maxm007/Le3cj4s0/，了解我的意思。

我如何将其应用于树的整个宽度？

<div class="tree-item">
   <div class="tree-item-content">
      Parent
   </div>
   <div class="tree-item-children">
    <div class="tree-item">

       <div class="tree-item-content">
          Child 1
       </div>
       <div class="tree-item-children">
          <div class="tree-item">
           <div class="tree-item-content">
             Grandchild
           </div>
           <div class="tree-item-children">
           </div>
      </div>   
       </div>
    </div>      
    <div class="tree-item">
       <div class="tree-item-content">
          Child 2
       </div>
       <div class="tree-item-children">
       </div>
    </div>

Answer 1

一种解决方案可能使用伪元素并对其属性+起作用；

transform:translateX(-100%)

.tree-item-children {
  padding-left:25px
}

.tree-item-content{
  position:relative;
}

.tree-item-content::after{
  height:100%;
  content:"";
  display:block;
  position:absolute;
  top:0;right:0;
  transform:translateX(-100%);
  width:100%;
}

.tree-item-content:hover,
.tree-item-content:hover::after{
  background:yellow
}