JSFiddle - React, Tailwind, and code Playground

by kevinPHPkevin

HTML

<img class="lion-img" src="http://images6.fanpop.com/image/photos/32200000/Lion-big-cats-32293787-500-548.jpg" width="100px" />
        
        <img class="tree-img" src="http://www.rbwm.gov.uk/graphics/Thumbs_up_Tree_only.jpg" width="100px" />
        
        <ul>
            <li class="lion">Lion</li>
            <li class="tree">Tree</li>
        </ul>

CSS

body {
    padding: 50px;
}
.active {
    background: #ccc;
}

JavaScript

$('.lion-img').hover(
  function () {
    $('.lion').addClass('active');
  }, 
  function () {
    $('.lion').removeClass('active');
  }
);
$('.tree-img').hover(
  function () {
    $('.tree').addClass('active');
  }, 
  function () {
    $('.tree').removeClass('active');
  }
);