TreeView with CSS

Handle background spanning entire parent

by bgrins

HTML

<div id="container">
    <ul>
        <li><div class="text"><div class="placeholder"></div>One</div>     
            <ul>
                <li><div class="text"><div class="placeholder"></div>One<br />1</div>
                            
                    <ul>
                        <li><div class="text"><div class="placeholder"></div>One<br />1</div>
                            
                            <ul>
                                <li><div class="text"><div class="placeholder"></div>One<br />1</div>
                                    
                                </li>
                            </ul>
                        </li>
                        <li><div class="text"><div class="placeholder"></div>One<br />1</div>
                                            
                                            
                            <ul>
                                <li><div class="text"><div class="placeholder"></div>One<br />1</div>
                                            
                                    <ul>
                                        <li><div class="text"><div class="placeholder"></div>One<br />1</div>
                                            
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

ul, li {padding:0;margin:0; list-style: none;}
li { margin-left: -1000px; padding-left: 1015px; }

.text { position:relative; }
.placeholder { 
    display:block;
    background:white; 
    position:absolute; 
    left: -1000px;
    right: 0;
    height: 100%;
    z-index:-1;
}

.placeholder { transition: all linear .2s;}
li.over > .text > .placeholder  { background:red;}
li.flash > .text > .placeholder  { background:orange;}

JavaScript

[].forEach.call(document.querySelectorAll("li"), function(r) {
    r.addEventListener("mouseover", function(e) {
        this.classList.add("over");
        e.stopPropagation();
    }, false);
    r.addEventListener("mouseout", function(e) {
        this.classList.remove("over");
       e.stopPropagation();
    }, false);
    
    r.addEventListener("dblclick", function(e) {
       this.classList.add("flash");
        var that = this;
        setTimeout(function() {
       that.classList.remove("flash");
            
        }, 2000);
       e.stopPropagation();
    }, false);
    
});