JSFiddle - React, Tailwind, and code Playground

by hubvill

HTML

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

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');
});