JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="iconFavorite"></div>
    <div class="iconFavorite"></div>
    <div class="iconFavorite"></div>
    <div class="iconFavorite"></div>
    <div class="iconFavorite"></div>
</div>

CSS

#container {
    width:200px;
}

    
.iconFavorite{
    float: right;
    background: url(http://t3.gstatic.com/images?q=tbn:ANd9GcRk4Mbns-pCrOXWL5WIiY-iy6syBtYLKzJKc5GSa9Ak9RGM_uDbEg&t=1) no-repeat;
    width: 16px;
    height: 16px;
    border: none;
    display:inline-block;
}

.iconFavorite.hover, .iconFavorite.hover ~ div.iconFavorite {
    background-image: url(http://www.custom52.com/Images/star_icon.gif)!important;
}

JavaScript

$(".iconFavorite").hover(function () {
        $(this).addClass("hover")
    },
    function () {
        $(this).removeClass("hover");
    });