JSFiddle - React, Tailwind, and code Playground

by stefek99

HTML

<a href="#" class="hoverable">
    <img src="http://i273.photobucket.com/albums/jj226/stefek99/1.png" data-hover="http://i273.photobucket.com/albums/jj226/stefek99/2.png" alt="We are screenreader-proof!">
</a>

CSS

img {
 border: 5px red solid;   
}

JavaScript

$(document).ready(function() {
        $(".hoverable").on("mouseenter", function() {
            var img = $(this).find("img")[0];
            $(img).attr("data-orig", img.src);
            img.src = $(img).data("hover");
        });

        $(".hoverable").on("mouseleave", function() {
            var img = $(this).find("img")[0];
            img.src = $(img).data("orig");
        });
});