JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">   
     <div id="mainmenu">   
         <img src="http://jsgears.com/_icons/11.png">  
         <img src="http://jsgears.com/_icons/12.png"> 
         <img src="http://jsgears.com/_icons/14.png"> 
         <img src="http://jsgears.com/_icons/15.png">   
    </div>   

     <img id="menuhover" src="http://jsgears.com/images/common/online_member.gif">   
</div>

CSS

#wrapper {   
        position: relative;   
        float: right;   
        right: 10%;   
        width: 210px;   
        height: 90px; /* 若沒設定高度，會造成下方區塊內容的 Y 軸位置變動 */  
        border: 1px solid black;   
}  
 
#mainmenu img {   
        position: relative;   
        overflow: hidden;   
}  
#menuhover {   
        position: relative;   
        display: none;   
}

JavaScript

var aryPosX = [];   
$('#mainmenu img').each(function(){   
        aryPosX.push($(this).position().left);   
});   
$('#mainmenu img').mouseenter(function(){   
        var idx = $('#mainmenu img').index($(this));   
        $('#menuhover')   
                .show()   
                .stop(true, false)   
                .animate({ 'left': aryPosX[idx] });   
});