JSFiddle - React, Tailwind, and code Playground

HTML

<div id="galleryContainer" style="width:200px;height:200px;background:green;">
    <div id="imageContainer" style="width:50px;height:100px;background:blue;">
        <div style="height:75px;">
            <img src="img" />
        </div>
        <div id="leftArrow" style="width:25px;height:25px;background:red;float:left;display:none;">L</div>
        <div id="rightArrow" style="width:25px;height:25px;background:yellow;float:left;display:none;">R</div>
    </div>
</div>

JavaScript

$("#imageContainer").mouseover(function()
{
    $("#leftArrow").fadeIn();
    $("#rightArrow").fadeIn();
});

$("#galleryContainer").mouseleave(function()
{
    $("#leftArrow").fadeOut();
    $("#rightArrow").fadeOut();
});