JSFiddle - React, Tailwind, and code Playground

by Sambora

HTML

<div id="Activate">
	<div class="hi-icon-wrap">
		 M
	</div>
	<div class="hi-icon-wrap">
		 O
	</div>
	<div class="hi-icon-wrap">
		 D
	</div>
	<div class="hi-icon-wrap">
		 O
	</div>
</div>

CSS

.hi-icon-wrap {
	text-align: center;
	height: 75px;
	float: left;
    font-size: 40px;
    font-weight: bold;
}

.test {
    background: Red;
}

JavaScript

$( "#Activate" ).mouseover(function() {
     
$("#Activate > .hi-icon-wrap").each(function (index) {
    $(this).delay(index * 500).animate({
        opacity: 0.5
    }, 500);
});
  });

  $( "#Activate" ).mouseout(function() {
    $(".hi-icon-wrap").animate({opacity: 1}, 500);
});