JSFiddle - React, Tailwind, and code Playground

by mobidevelop

HTML

<nav id="menu">
            <ul>
                <li id="m-1"><a href="#">XXX</a></li>
                <li id="m-2" class="dd"><a href="#">XXX</a></li>
                <li id="m-3"><a href="#">XXX</a></li>
                <li id="m-4"><a href="#">XXX</a></li>
                <li id="m-5"><a href="#">XXX</a></li>
                <li id="m-6"><a href="#">XXX</a></li>
                <li id="m-7"><a href="#">XXX</a></li>
            </ul>                
        </nav>

CSS

li.hover {
    background-color: #123;
}

JavaScript

$("#menu a").hover(
  function () {
    $(this).parents('li').addClass('hover');
  }, 
  function () {
    $(this).parents('li').removeClass('hover');
  }
);