JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class='list'>
    <a data-item='1' data-position='one' href="#">ITEM 1</a>
    <a data-item='2' data-position='two' href="#">ITEM 2</a>
    <a data-item='3' data-position='three' href="#">ITEM 3</a>
    <a data-item='4' data-position='four' href="#">ITEM 4</a>
  </div>
  <div class="square">
  </div>
  <div class="current"></div>

</div>

CSS

body {background:#eee;text-align:center;font-family:sans-serif;}
.container{background:#fff;position:relative;padding:0 50px 50px 50px;display:inline-block;margin-top:100px;}
.list{height:37px;}
a{text-decoration:none;padding:0 20px 20px 20px;color:#333}
a:hover{background:#cc6600;color:#fff;}
.square{position:absolute;width:50px;height:50px;}
.square{background:#ff99ff url('http://i.imgur.com/oWNsQzD.png');top:-50px;left:0;transition:left 1.2s;}

.right{background-position: -50px;}
.one {left:15%;}
.two {left:35%;}
.three {left:55%;}
.four {left:75%;}

JavaScript

$(document).ready(function() {
  var container = $('.container .list')
  var square = $('.square')
  var currentPosition = ''
  var current = 0
  
  container.on('mouseenter', 'a', function(e) {
    var item = $(this).attr('data-item')
    var position = $(this).attr('data-position')
    
    if(item > current) {
      square.addClass('right')
    } else {
      square.removeClass('right')
    }
    current = +item
    square.removeClass(currentPosition).addClass(position)
    currentPosition = position
  })
  
  container.on('mouseleave', function() {
    square.removeClass('right').removeClass(currentPosition)
    current = 0
    currentPosition = ''
  })
})