JSFiddle - React, Tailwind, and code Playground

by Michael Danilov

HTML

<div class="icon" data-default="http://images.moschange.ru/make/pin/f2b5342fe686c04ec7a5a26a87680ba7.jpg" data-href="http://images.moschange.ru/make/selected-pin/f2b5342fe686c04ec7a5a26a87680ba7.jpg"></div>

SCSS

.icon {
    width: 60px;
    height: 50px;
    background-position: 0 0;
    background-repeat: no-repeat;
    cursor: pointer;
}

JavaScript

$(function () {
  var $icon = $('.icon');
  $icon.on('mouseenter', function () {
    $icon.css('background-image', 'url(' + $icon.attr('data-href') + ')');
  });
  $icon.on('mouseleave', function () {
    $icon.css('background-image', 'url(' + $icon.attr('data-default') + ')');
  });
});