JSFiddle - React, Tailwind, and code Playground

by roXon

HTML

<h1>Move mouse on image to Zoom In and Zoom Out</h1>
<br />


<div id="cont">
<div id="art"  style= "position: absolute; left: 20px; top: 40px;">
    <a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png">
    </a>
</div>
    <img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" alt="smile" id="imgSmile" />
</div>

JavaScript

$(document).ready(function(){

    $('#art').hide(); 
    
        
    $('#imgSmile, #art').on('mouseenter mouseleave',function(e){
        if(e.type === 'mouseenter'){
            $('#art').show();
        }else{
            $('#art').hide();   
        }
    });


    
});