JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: relative; text-align: center;">
    <div style="position: relative; display: inline-block;">
        <p style="text-align: center;">
            <img alt="" src="http://dev.toolhub.com/portals/13/Images/HowItWorks/HowItWorks_Main.png" />
        </p>
        <br />
<a href="#Server" class="HowItWorks" id="lnkServer" style="left: 49.52%; top: 45.82%; width: 7.2%; height: 12.5%; position: absolute; z-index: 0;">
</a><a href="#Application" class="HowItWorks" id="lnkApplication" style="left: 74.3%; top: 28.5%; width: 10%; height: 12.25%; position: absolute; z-index: 0;">
</a><a href="#Business" class="HowItWorks" id="lnkBusiness" style="left: 76.61%; top: 72%; width: 9%; height: 10.8%; position: absolute; z-index: 0;">
</a><a href="#Barcode" class="HowItWorks" id="lnkBarcode" style="left: 12.45%; top: 63.78%; width: 9%; height: 10.8%; position: absolute; z-index: 0;">
</a><a href="#ManualEntry" class="HowItWorks" id="lnkManualEntry" style="left: 25.15%; top: 38.06%; width: 9.5%; height: 11.5%; position: absolute; z-index: 0;">
</a><a href="#RFID" class="HowItWorks" id="lnkRFID" style="left: 10.86%; top: 6.12%; width: 10%; height: 12.5%; position: absolute; z-index: 0;">
</a>

    </div>
    <div class="HowItWorksDiv" style="display: none; position: absolute; left: 51.38%; top: 42.86%; z-index: 1000;" id="divServer">
        <img alt="" src="http://dev.toolhub.com/portals/13/Images/HowItWorks/HowItWorks_Server.png" style="z-index: 1001;" />
    </div>
    <div class="HowItWorksDiv" style="display: none; position: absolute; left: 55.97%; top: 11.25%; z-index: 1000;" id="divApplication">
        <img alt="" src="http://dev.toolhub.com/portals/13/Images/HowItWorks/HowItWorks_Application.png" style="z-index: 1001;" />
    </div>
    <div class="HowItWorksDiv" style="display: none; position: absolute; left: 57.64%; top: 68.88%; z-index: 1000;" id="divBusiness">
        <img alt=""...

CSS

.HowItWorksDiv {
    border: solid 1px;
}

JavaScript

$(document).ready(function () {
    $(".HowItWorks").on("mouseenter", function (e) {
        var name = $(this).attr("href").toString().substring(1);
        $("#div" + name).fadeIn();
        e.stopPropagation();
    });   
    $(".HowItWorks").on("tap", function (e) {
        $(".HowItWorksDiv").fadeOut();
        var name = $(this).attr("href").toString().substring(1);
        $("#div" + name).fadeIn();
    });
    $(".HowItWorksDiv img").mouseleave(function (e) {
        var lnk = "#lnk" + $(e.target).parent().attr("id").substring(3) + ":hover";
        if ($(lnk).length === 0) {
            $(e.target).parent().fadeOut();
        }
        e.stopPropagation();
    });
    $(".HowItWorksDiv img").mouseenter(function (e) {
        $(e.target).parent().show();
        //var lnk = "#lnk" + $(e.target).parent().attr("id").substring(3);        
    });
});