JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul id="buttons">
   <li class="a">button a</li>
   <li class="b">button b</li>
</ul>

<div id="items">
    <div class="item-a"></div>
    <div class="item-b"></div>
    <div class="item-b"></div>
    <div class="item-a"></div>
    <div class="item-b"></div>
</div>

CSS

div {
    min-height: 2em;
    border-bottom: 2px solid #000;
    margin: 0  0 0.2em 0;
}

div.item-a {
    background-color: #f90;
}

div.item-b {
    background-color: #f00;
}

div.hover {
    background-color: #0f0;
}

JavaScript

$('#buttons li').hover(function(){
    $('.item-' + this.className).addClass('hover');
},
function(){
    $('.item-' + this.className).removeClass('hover');
});