JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>Testing</title>
    </head>
    <body>
        <div class='imgGallery'>
            <img class='page-item-54' src='http://www.gravatar.com/avatar/fe588a5d4479d7dfc892e82f29f776a8?s=32&d=identicon&r=PG'>
            <img class='page-item-55' src='http://www.gravatar.com/avatar/fd2ff78844cdc61d8d848ab598c2e32d?s=32&d=identicon&r=PG'>
            <img class='page-item-56' src='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG'>
        </div>
        <ul class='pageNav'>
            <li class="page-item-54">Sub Gallery 54</li>
            <li class="page-item-55">Sub Gallery 55</li>
            <li class="page-item-56">Sub Gallery 56</li>
        </ul>
        <ul class='pageNav'>
            <li class="page-item-54">Another Gallery 54</li>
            <li class="page-item-55">Another Gallery 55</li>
            <li class="page-item-56">Another Gallery 56</li>
        </ul>
    </body>
</html>

JavaScript

$(document).ready(function() {
    $(".imgGallery img").hover(
        function() {
            // Code for when the hover starts, the (raw) hovered `img`
            // element is `this`, from which we can get the class name
            // to feed into a selector for finding the relevant `li`
            $(".pageNav ." + this.className).css({backgroundColor: '#eee'});
        },
        function() {
            // Code for when the hover ends, the (raw) unhovered `img` 
            // element is `this`
            $(".pageNav ." + this.className).css({backgroundColor: 'white'});
        }
    );
});