JSFiddle - React, Tailwind, and code Playground

by Asim Shariff

HTML

<ul data-desktop-menu>
    <li class="menu-item menu-item--category" data-desktop-menu-item="grow">
        <a href="#"><img src="http://www.milkywayjp.com/wp-content/themes/milkyway/images/social/facebook.png  "oversrc="http://www.archaeologyfieldwork.com/AFW/images/facebook.png "alt=""/><span>Grow</span></a>
    </li>
    <li class="menu-item menu-item--category last" data-desktop-menu-item="assist">
        <a href="#"><img src="images/icons-hd/assist.png" oversrc="images/icons-hd/assist-over.png" alt=""/><span>Assist Me</span></a>
    </li>
</ul>

JavaScript

$('li.menu-item.menu-item--category').hover(function() {
   var t=$(this).find('img');  
    var temp=t.attr('src');
    t.attr('src',t.attr('oversrc'));
    t.attr('oversrc',temp);
 // $(this).addClass('active');
    }, function() {
    //$(this).removeClass('active');
    var t=$(this).find('img');  
    var temp=t.attr('src');
    t.attr('src',t.attr('oversrc'));
    t.attr('oversrc',temp);
});