JSFiddle - React, Tailwind, and code Playground

by antouank

HTML

<ol id="elementlist">
    <li>item 1</li>  
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ol>

JavaScript

$("li", "#elementlist")
.on("mouseover", function(){
    // highlight on mouseover 
    $(this).css("background-color","#f2fdf2");
})
.on("mouseout", function(){ 
    // restore white background   
    $(this).css("background-color","#ffffff");
})
.on("dblclick", function(){
    // highlights on double click, but doesn't disable mouseover/mouseout
    $(this).css("background-color","#f2d2d2");
    $(this).off();
});