JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stage-main teaser t-stage-slideshow">
                        <a href="#"><img width="620" height="269" src="../static/ockle/img/sample-stage-1.jpg" alt="@@"></a>
                        <a href="#"><img width="620" height="269" src="../static/ockle/img/sample-stage-1.jpg" alt="@@"></a>
                    </div>
                    <div>
                        <a href="#" id="t-stage-prev">Prev</a>
                        <a href="#" id="t-stage-next">Next</a>
                    </div>
                    <h3>Pager</h3>
                    <div id="t-stage-pager">
                        <a class="activeSlide" href="#">foo</a>
                        <a class="" href="#">foo</a>
                    </div>

CSS

#a, #b {
    border: 1px solid #BADA55;
    width: 100px;
    margin: 20px;
    padding: 10px;
}

.active {
    background-color: #BADA55;
}

JavaScript

$(".t-stage-slideshow").bind({
    mouseenter: function() {
        $("a#t-stage-prev,a#t-stage-next").addClass("active");
    },
    mouseleave: function() {
        $("a#t-stage-prev,a#t-stage-next").removeClass("active");
    }
});