JSFiddle - React, Tailwind, and code Playground

HTML

<div class="map_container"> <a class="dot" style="left: 315px; top: 189px;" data-facility="bldg4" data-work="bldg4work"></a>
 <a class="dot" style="left: 514px; top: 188px;" data-facility="bldg7" data-work="bldg7work"></a>

    <div class="legend">4. <a class="legt" data-facility="bldg4" data-work="bldg4work">Primary Clarifiers - West</a>

        <br />7. <a class="legt" data-facility="bldg7" data-work="bldg7work">Secondary Clarifiers</a>

        <br />
    </div>
</div>

CSS

.map_container a.dot {
    display: block;
    height: 20px;
    width: 20px;
    background-image: url(../images/dots.png);
    background-color: #630;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    cursor: pointer;
    position: absolute;
}
.map_container a.dot:hover {
    background-position: 0px -20px;
    background-color:yellow;
}
.map_container a.dot.hover {
    background-position: 0px -20px;
    background-color:yellow;
}
.map_container a.dot.selected {
    background-position: 0px -40px;
    background-color:green;
}
.map_container a.legt {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #F00;
    font-weight: bold;
    text-decoration: none;
}
.map_container a.legt.hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #FF0;
    font-weight: bold;
    background-color: #630;
    text-decoration: none;
}
.map_container a.legt.selected {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    color: #0F0;
    background-color: #630;
}

JavaScript

$('a.dot, a.legt').on({
    mouseenter: function () {
        var $this = $(this);
        facility = $this.data('facility');
        $('a[data-facility=' + facility + ']').addClass("hover");
    },
    mouseleave: function () {
        var $this = $(this);
        facility = $this.data('facility');
        $('a[data-facility=' + facility + ']').removeClass("hover");
    },
    click: function () {
        var $this = $(this),
            facility = $this.data('facility'),
            work = $this.data('work'),
            htmlCode = $('.work_detail#' + work).html(),
            $detailContainer = $('.detail_container');

        $('a.dot, a.legt').removeClass('selected');
        $('a[data-facility=' + facility + ']').addClass("selected");

        $detailContainer.fadeOut(500, function () {
            $detailContainer.find(".work_detail").html(htmlCode);
            $detailContainer.fadeIn(500);
        });
    }
});