JSFiddle - React, Tailwind, and code Playground

by hubvill

HTML

<div>
  <div class="sub-menu">Active Menu 1</div>
  <div class="sub-menu">Active Menu 2</div>
  <div class="sub-menu active-menu">Active Menu 3</div>
  <div class="sub-menu">Active Menu 4</div>
  <div class="sub-menu">Active Menu 5</div>
</div>

CSS

.sub-menu {
  color: #000;
} 

.active-menu {
  color: red;
}

.hover {
  color: pink;
}
.hover ~ .sub-menu {
  color: #000;
}

JavaScript

$('.sub-menu').hover(function() {
		$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	});