JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="left-menu">
    <li id="hoverOne">Hover 1</li>
    <li id="hoverTwo">Hover 2</li>
</ul>
<div id="image-container">
    <div id="hoverOneImage" style="display: none;">Hi</div>
    <div id="hoverTwoImage" style="display: none;">Hi again.</div>
</div>

CSS

.left-menu {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 0 0;
}
#image-container {
    display: inline-block;
    vertical-align: top;
}
#image-1 {
    background: red;
}
#image-2 {
    background: blue;
}

JavaScript

myList = ["hoverOne", "hoverTwo"];
for(var i=0; i < myList.length; i++){
    document.getElementById(myList[i]).onmouseover=function (evnt) { changeImage(evnt.srcElement.id); };
}
function changeImage(thisDiv){
    console.log(thisDiv + "Image");
    //show/hide code here
}