JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<ul id="list">
    <li class="highlight">Color 1</li>
    <li>Color 2</li>
    <li>Color 3</li>    
</ul>
<div id='image-container'>
  <span class="active">1</span>
  <span>2</span>
  <span>3</span>
</div>

CSS

li{
  display: inline-block;
  border: solid 1px;
  padding: 4px;
  cursor: pointer;
}
li.highlight{
  box-shadow: #111 0 0 10px;
}
span{display: none;}
span.active{display: inline;}

JavaScript

var allLi = document.getElementById('list').children;

for(var i = 0; i < allLi.length; i++){

	allLi[i].addEventListener('mouseenter', function(){

		//Find index
		var nodes = Array.prototype.slice.call(allLi);
		index =  nodes.indexOf(this);

    //Hide currently shown image
    document.getElementsByClassName('active')[0].classList.remove('active');
		
    //Select all span
		var spanList = document.getElementById('image-container').children;
    
    //Show correct span
    spanList[index].classList.add('active');
    
    //Update 'highlight' class
    document.getElementsByClassName('highlight')[0].classList.remove('highlight');
    this.classList.add('highlight');    
	});
}