JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
Div 1
</div>
<div id="div2">
Div 2
</div>
<div id="div3">
Div 3
</div>
<div id="div4">
Div 4
</div>

CSS

div{
  height: 70px;
  width: 70px;
  background: blue;
  margin: 10px;
  display: inline-block;
  color: #fff;
  font-size: 20px;
  text-align: center;
}

JavaScript

$('div').mouseenter(function(){
	$(this).css({opacity:0.5});
});

$('div').mouseleave(function(){
	$(this).css({opacity:1});
});

var cnt = 1;
var prevCnt = 4;

setInterval(function(){
	$('#div' + prevCnt).mouseleave();
	$('#div' + cnt).mouseenter();
  prevCnt++;
  cnt++;
  if(cnt > 4){
  	cnt = 1;
  }
  
  if( prevCnt > 4){ 
  	prevCnt = 1;
  }
}, 3200);