JSFiddle - React, Tailwind, and code Playground

by prasad raja

HTML

<div id="crbigimg">
    <img id="copyrightimagecurrent"  src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/128/single-bird-icon.png" old-src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/128/single-bird-icon.png" alt="Copyright" />
    
        <div id="copyright1" class='cps' data-src="http://icons.iconarchive.com/icons/fasticon/halloween-emoticons/128/Halloween-sad-icon.png">one</div>
        <div id="copyright2" class='cps' data-src="http://icons.iconarchive.com/icons/fasticon/halloween-emoticons/128/Halloween-sad-icon.png">two</div>
        <div id="copyright3" class='cps' data-src="http://icons.iconarchive.com/icons/fasticon/halloween-emoticons/128/Halloween-sad-icon.png">three</div>
        <div id="copyright4" class='cps' data-src="http://icons.iconarchive.com/icons/fasticon/halloween-emoticons/128/Halloween-sad-icon.png">four</div>
</div>

CSS

.cps{height:100px;width:100px;}

JavaScript

$('.cps').hover(function() {
  var that = $(this);
    var newSrc = that.attr('data-src');
    var img = $('#copyrightimagecurrent');    
    img.attr('src',newSrc);
},function() {
  var that = $(this);
    var img = $('#copyrightimagecurrent');
    img.attr('src',img.attr('old-src'));
});