JSFiddle - React, Tailwind, and code Playground

by John Stewart

HTML

<div id="social-links"> 
    <div id="facebook"><a href=""><img src="http://placehold.it/150x150"/></a></div>
    <div id="twitter"><a href=""> <img src="http://placehold.it/150x150"  /></a></div>
    <div id="youtube"><a href=""> <img src="http://placehold.it/150x150"  /></a></div>
    <div id="mail"><a href=""> <img src="http://placehold.it/150x150"  /></a> </div>  
</div>

JavaScript

$("#facebook").hover( function () {
    $(this).find("img").attr('src', "http://placehold.it/150x150/ff0000/000000");
}, function () {
    $(this).find("img").attr('src', 'http://placehold.it/150x150');
});

$("#twitter").hover( function () {
    $(this).find("img").attr('src', "http://placehold.it/150x150/ff0000/000000");
}, function () {
    $(this).find("img").attr('src', 'http://placehold.it/150x150');
});

$("#youtube").hover( function () {
    $(this).find("img").attr('src', "http://placehold.it/150x150/ff0000/000000");
}, function () {
    $(this).find("img").attr('src', 'http://placehold.it/150x150');
});

$("#mail").hover( function () {
    $(this).find("img").attr('src', "http://placehold.it/150x150/ff0000/000000");
}, function () {
    $(this).find("img").attr('src', 'http://placehold.it/150x150');
});