JSFiddle - React, Tailwind, and code Playground

by avall

HTML

<div class="banner-nav-wrap">
                <ul>
                    <li class="banner-nav-item" data-img="http://y.wpimg.pl/i/ivar/G/201402/1392126299_a.jpg">List item 1</li>
                    <li class="banner-nav-item" data-img="http://y.wpimg.pl/i/ivar/W/201403/1395743584_150.jpg">List item 2</li>
                    <li class="banner-nav-item" data-img="http://y.wpimg.pl/i/ivar/G/201309/1378452896_a.jpg">List item 3</li>
                </ul>
        </div> 

<img src='' id="hover-img" />

JavaScript

$('.banner-nav-item').hover(function() {
  var img = $(this).attr('data-img'); 
  $('img#hover-img').stop(true).fadeIn('slow').attr('src', img);
},function() {
  $('img#hover-img').stop(true,true).fadeOut('slow');
});