JSFiddle - React, Tailwind, and code Playground

by urahara

HTML

<div id='list'>
    <ul>
        <li>Lv1: First Item</li>
        <li>Lv1: Second Item</li>
        <li>
            <ul>
                <li>Lv2: First Item</li>
                <li>
                    <ul>
                        <li>Lv3: First Item</li>
                        <li>Lv3: Second Item</li>
                        <li>Lv3: Third Item</li>
                    </ul>
                </li>
                <li>Lv2: Second Item</li>
                <li>Lv2: Third Item</li>
            </ul>
        </li>
    </ul>
</div>

CSS

ul {
    list-style-type: none;
}

JavaScript

var list = $('list');

$('ul').delegate('li', 'mouseover', function (e) {
    if (e.currentTarget.tagName == 'LI') {
        $(e.currentTarget).css('background-color','yellow');
        e.stopPropagation();
    }
});

$('ul').delegate('li', 'mouseout', function (e) {
    if (e.currentTarget.tagName == 'LI') {
        $(e.currentTarget).css('background-color','');
        e.stopPropagation();
    }
});