JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rating">
    <div class="star-rating" title="153 votes"><a href="#" id="star-1-full"><span class="star star-full"></span></a><a href="#" id="star-2-full"><span class="star star-full"></span></a><a href="#" id="star-3-full"><span class="star star-full"></span></a><a href="#" id="star-4-full"><span class="star star-half"></span></a><a href="#" id="star-5-half"><span class="star star-empty"></span></a>

        <p>153 votes</p>
    </div>
</div>

CSS

@font-face {
    font-family:dashicons;
    src:url(http://cdn.lukej.me/dashicons/0.1.0/fonts/dashicons.eot) format('eot'), url(http://cdn.lukej.me/dashicons/0.1.0/fonts/dashicons.woff) format('woff'), url(http://cdn.lukej.me/dashicons/0.1.0/fonts/dashicons.ttf) format('truetype'), url(http://cdn.lukej.me/dashicons/0.1.0/fonts/dashicons.svg) format('svg');
    font-weight:400;
    font-style:normal;
}
.star-rating .star-empty:before {
    content:"\f154";
}
.star-rating .star-full:before {
    content:"\f155";
}
.star-rating .star-half:before {
    content:"\f459";
}
a, a:visited {
    text-decoration: none;
}
.star-rating .star {
    color: #FECB30;
    display: inline-block;
    font-family: dashicons;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    height: 16px;
    line-height: 1;
    text-align: center;
    text-decoration: inherit;
    vertical-align: top;
    width: 16px;
    }

JavaScript

$(document).ready(function () {
    $('.rating').on('mouseenter', 'a[id^=star-]', function () {
        console.log('Hello');
        $(this).children('span').addClass('star-empty').removeClass('star-full');
    }).on('mouseleave', 'a[id^=star-]', function () {
        console.log('leave');
        $(this).children('span').addClass('star-full').removeClass('star-empty')
    });
});