JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<ul id="group1">
  <li><a href="#" class="test1">test1</a></li>
  <li><a href="#" class="test2">test2</a></li>
  <li><a href="#" class="test3">test3</a></li>
</ul>
<ul id="group2">
  <li><a href="" class="test1">receive1</a></li>
  <li><a href="" class="test2">receive2</a></li>
  <li><a href="" class="test3">receive3</a></li>
</ul>

CSS

ul {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 10px;
}
ul li a {
  border: 1px solid;
  color: #fff;
  text-decoration: none;
}
ul li a.active, ul li a:hover {
  background-color: green !important;
}
ul#group1 a {
  background-color: red;
}
ul#group2 a {
  background-color: blue;
}

JavaScript

$(function(){
    $('li a').each(function(){
         var $class = $( '.' + $(this).attr('class') );
        
        $(this).hover(
        //mouseenter
        function(){
            $class.addClass('active');
        },
        //mouseleave
        function(){
            $class.removeClass('active');
        }
        );
    });
});