JSFiddle - React, Tailwind, and code Playground

HTML

<li class="item">
    <a href="http://www.google.com" class="product-image">
        <span>
            <img src="http://pharmacy.umich.edu/pkcore/files/university-of-michigan-logo.gif" data-hover="http://www.thedigitalbus.com/wp-content/uploads/2009/04/msu_logo.gif" width="243" height="243" />
        </span>
    </a>   
</li>

JavaScript

$(function () {
    $('.item img').each(function () {
        $(this).data('original', this.src)
    }).mouseenter(function () {
        $(this)
            .attr('src', $(this).data('hover'))
    }).mouseleave(function () {
        $(this)
            .attr('src', $(this).data('original'))
    })

})