JSFiddle - React, Tailwind, and code Playground

HTML

<div id="images">
    <img id="img0" src="../../WDC/Jan-Cal.png"  />
    <img id="img1" src="../../WDC/Feb-Cal.png"  />
    <img id="img2" src="../../WDC/March-Cal.png"/>
    </div>

    <ul id="legends">
    <li value="0">January</li>
    <li value="1">February</li>
    <li value="2">March</li>

     </ul>

CSS

#images img {
    width: 50px; height: 50px;
}

#img0 {
    background:blue;
}

#img1 {
    background:yellow;
}

#img2 {
    background:green;
}

JavaScript

var images = $('#images').find('img');

//hide images at the beginning
images.not(images.first()).hide();

$("#legends").on("mouseover", 'li', function () {
    var $this = $(this),
        $this_val = $this.val();
    
    images.hide();
    $("#img"+$this_val).show();
});