JSFiddle - React, Tailwind, and code Playground

by amullins

HTML

<ul ng-app="app">
    <li class="menu-item menu-item-category active" ele-hover-action="" ele-up-img-src="https://placekitten.com/460/200" ele-over-img-src="https://placekitten.com/420/200">
   <a href="#"><img src="" alt=""/><span>Test1</span></a>
</li>
<li class="menu-item menu-item-category" ele-hover-action="" ele-up-img-src="https://placekitten.com/240/360" ele-over-img-src="https://placekitten.com/260/390">
  <a href="#"><img src="" alt=""/><span>Test2</span></a>
</li>
</ul>

JavaScript

angular.module("app", []).directive('eleHoverAction', function() {
return {
    link: function (scope, elem, attrs) {
        var imgObj = elem.find('img');
        var upImg = attrs.eleUpImgSrc;
        var overImg = attrs.eleOverImgSrc;

        elem.bind('mouseover', function () {
            imgObj.attr("src", overImg);
            scope.$apply();
        });
        elem.bind('mouseout', function() {
            if (!elem.hasClass("active")) {
                imgObj.attr("src", upImg);
            }
            scope.$apply();
        });
        
        if (elem.hasClass("active")) {
            imgObj.attr("src", overImg);
        } else {
            imgObj.attr("src", upImg);
        }
    }
  };                
});