JSFiddle - React, Tailwind, and code Playground

by m v

HTML

<ul id="menu">
    <li class="item_1"><a href="">item 1</a></li>
    <li class="item_2"><a href="">item 2</a></li>
    <li class="item_3"><a href="">item 3</a></li>
  </ul>

CSS

#menu.yellow { 
    background-color: yellow;
}
#menu.gray { 
    background-color: gray;
}
#menu.pink { 
    background-color: pink;
}

JavaScript

$('.item_1').hover(function() {
    $('#menu').addClass('yellow');
}, function() {
    $('#menu').removeClass('yellow');
});
$('.item_2').hover(function() {
    $('#menu').addClass('gray');
}, function() {
    $('#menu').removeClass('gray');
});
$('.item_3').hover(function() {
    $('#menu').addClass('pink');
}, function() {
    $('#menu').removeClass('pink');
});

$('.item_1').click(function() {
    $('#menu').css('background-color', 'yellow');
    return false;
});
$('.item_2').click(function() {
    $('#menu').css('background-color', 'gray');
    return false;
});
$('.item_3').click(function() {
    $('#menu').css('background-color', 'pink');
    return false;
});