JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#" class="fbhover"><img class="hoverEffect" src="http://i.imgur.com/nHJ6Loa.png" alt="facebook" data-hover-image="http://i.imgur.com/bdMNHnw.png" /></a>
    </li>
</ul>

JavaScript

var imgs = document.getElementsByClassName('hoverEffect'),
    over = function(){
        this.setAttribute('data-default-image', this.src);
        this.src = this.getAttribute('data-hover-image');
    },
    out = function() {
        this.src = this.getAttribute('data-default-image');
    };
for(var i=0; i<imgs.length; ++i) {
    imgs[i].onmouseover = over;
    imgs[i].onmouseout = out;
}