JSFiddle - React, Tailwind, and code Playground

by gbin1

HTML

<div id="body">

    <div id="container">
        
        <ul id="list1">
            <li class='list'>Mouseout</li>
            <li class='list'>GBin1.com</li>
        </ul>
        
        
        
        <ul id="list2">
            <li class='list'>Mouseleave</li>
            <li class='list'>GBin1.com</li>
        </ul>        
    </div>
    
</div>

CSS

#container{
    margin: 100px auto;
    padding: 10px;
    width: 300px;
    font-family: Arial;
}

#list1,#list2{
    list-style: none outside none;
    background: #333;
    width: 150px;
    font-size: 12px;
    padding: 10px;
    float: left;
    margin: 5px;
}

#list1 li, #list2 li{
    position: relative;
    padding: 15px;
    white-space:nowrap;
    overflow: hidden;
    color: #CCC;
    border: 1px dotted #333;
    margin: 15px;
}

JavaScript

$(function(){
    ul = $("#list1");
    
    li = $("#list1 li");
    
    li.mouseenter(function(e){                    
        ul.css({background:'#555'});
    });
    
    ul.mouseout(function(e){                    
        $(this).css({background:'#fff'});
    });
    
    ul2 = $("#list2");
    
    li2 = $("#list2 li");

    li2.mouseenter(function(e){                    
        ul2.css({background:'#555'});
    });
    
    ul2.mouseleave(function(e){                    
        $(this).css({background:'#fff'});
    });
    
});