JSFiddle - React, Tailwind, and code Playground

by thesystemrestart

HTML

<img src="http://www.gnu.org/graphics/gnu-and-penguin-color-300x276.jpg" id="main" />

<img src="http://www.gnu.org/graphics/gnu-and-penguin-color-100x92.jpg" id="small" />

CSS

img {
    position: absolute;   
    border: 1px solid black;
}
img#main {
    left: 10px;
    top: 10px;
}
img#small {
    left: 20px;
    top: 220px;
    display: none;
}

JavaScript

$("#main, #small").mouseenter(function() {
    $("#small:hidden").show();
}).mouseleave(function(e) {
    if(e.target.id != 'main' || e.target.id != 'small') {
      $('#small').hide();
    }
});;

/*$("#main").mouseleave(function() {
    if (! $("#small").is(":hover") ) {
        $("#small").hide();
    }
});

$("#small").mouseleave(function() {
    if (! $("#main").is(":hover") ) {
        $("#small").hide();
    }       
});*/