JSFiddle - React, Tailwind, and code Playground

by 1stein

HTML

<div class="hoverButton" id="hoverhighlands" >

</div>
<div class="overlay" id="highlands" ></div>

CSS

.hoverButton
{
    width: 200px;
    height: 200px;
    background-color: Green;
    border-color: Transparent;
}
.hoverButton:hover
{
    border-width: 1px;
    background-color: Yellow;
}
.overlay
{
    display:none;
    top: 0;
    left: 0;
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: Red;
    z-index: 1000;
    opacity: 0.5;
}

JavaScript

$(function() {
    setMapOverlays();
});


function setMapOverlays() {
    $(".mapOverlay").hide();
    $(".hoverButton").mouseenter(function() {
        var id = $(this).attr('id');
        id = id.substr(5);

        showOverlay(id, this);
    });
};

function showOverlay(id, initiator) {
    initiator = $(initiator);
    initiatorBoundary = {
        x1: initiator.offset().left,
        x2: initiator.offset().left + initiator.outerWidth(),
        y1: initiator.offset().top,
        y2: initiator.offset().top + initiator.outerHeight()
    };

    $('#' + id).mousemove(function(event) {
        if (event.pageX < initiatorBoundary.x1 || event.pageX > initiatorBoundary.x2 || event.pageY < initiatorBoundary.y1 || event.pageY > initiatorBoundary.y2) {
            $(this).hide();
        }
    }).show();
}