How does one get a tree view in HTML to have hover effect on its nodes that span the full width of the tree?

user_80924 0
Viewed 387

I have a tree view like below. When I create a hover css effect, it applies only as far as the child node width.
See https://jsfiddle.net/maxm007/Le3cj4s0/ to see what I mean.

How can I get it to apply to the full width of the tree?

<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>

css html
1 Answers

A solution could be using a pseudo element and work, for example, on its property 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
}
<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>      
   
      
   </div>
</div>

user_65886210
Related