JSFiddle - React, Tailwind, and code Playground
HTML
<div class="menu">
<a href="#" data-image-src="http://farm7.staticflickr.com/6092/6330704947_dd7e1b453c_t.jpg">link 1</a>
<a href="#" data-image-src="http://farm1.staticflickr.com/13/15463218_8651d51b21_t.jpg">link 2</a>
<a href="#" data-image-src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_t.jpg">link 3</a>
<a href="#" data-image-src="http://farm4.staticflickr.com/3036/2975303180_86c4858b2b_t.jpg">link 4</a>
<a href="#" data-image-src="http://farm7.staticflickr.com/6216/6240217938_aeed84634a_t.jpg">link 5</a>
</div>
<div id="container">
<img src="">
</div>
CSS
.menu a {
padding: 2px 4px;
color: #555;
text-decoration: none;
}
.menu a:hover {
color: #ddd;
background: #333;
}
#container {
margin-top: 10px;
}
#container img {
margin: 4px;
padding: 4px;
border: 1px dashed #aaa;
}
JavaScript
$(document).ready(function () {
$('.menu a').hover(function () {
$('#container img').attr('src', $(this).data('image-src'));
});
});