JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<ul>
    <li class="cat active">Cat</li>
    <li class="dog">Dog</li>
    <li class="giraffe">Giraffe</li>
</ul>
<div id="photo" class="cat"></div>

JavaScript

var getPhotoClassesFromElement = function ($el) {
        var otherClasses = $el[0].className.replace(/\s*active\s*/, '');
        return otherClasses;
    };

    var handlerIn = function (e) {
        var $el = $(e.target);
        var photoClass = getPhotoClassesFromElement($el);
        $('#photo').removeClass().addClass(photoClass);
    };

    var handlerOut = function (e) {
        var $el = $(e.target);
        var photoClass = getPhotoClassesFromElement($('li.active'));
        $('#photo').removeClass().addClass(photoClass);
    };

    $('li').hover(handlerIn, handlerOut);