JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu1"> Menu </div>
<br/><br/>
<div id="menu2" onmouseover="txtroll()" onmouseout="txtout()"> Menu 2 </div>

CSS

#menu1 {
    background-image: none;
    height:100px;
}
#menu1:hover {
    background-image: url('http://placekitten.com/200/100');
}

JavaScript

function txtroll(){
var elem = document.createElement("img");
elem.setAttribute("src", "http://placekitten.com/200/100");
elem.setAttribute("height", "100");
elem.setAttribute("width", "200");
elem.setAttribute("alt", "title2");
document.getElementById("menu2").appendChild(elem);
}

function txtout()
{
    document.getElementById("menu2").innerHTML =" Menu 2";
}