JSFiddle - React, Tailwind, and code Playground

by quantum_leap123

HTML

<div class="menu-item-452">1</div>
<div class="menu-item-452">2</div>
<div class="menu-item-452">3</div>
...

<div class="box infinite-navigation-slide-bar">1</div>
<div class="box infinite-navigation-slide-bar">2</div>
<div class="box infinite-navigation-slide-bar">3</div>
<div class="testbox box">3</div>
...

<script type="text/javascript">
  jQuery(function($) {
    for(var i=0; i <= 20; i++) 
      $("ol li:nth-child(" + i + ")").addClass('olli' + i);
  });
</script>

CSS

.menu-item-452 {
  height: 50px;
    width: 100px;
    border: 2px solid #000;
    text-align: center;
    line-height: 50px;
    float: left;
    margin: 10px 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.box-hover {
  background:red;
  height: 50px;
    width: 100px;
    border: 2px solid #000;
    text-align: center;
    line-height: 50px;
    float: left;
    margin: 10px 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.testbox {
  display:none;
}
.box {
  height: 50px;
    width: 100px;
    border: 2px solid #000;
    text-align: center;
    line-height: 50px;
    float: left;
    margin: 10px 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

JavaScript

$(document).ready(function () {
    $(".menu-item-452").mouseover(
      function () {
        $(this).addClass("box-hover");
      },
      function () {
        $(".infinite-navigation-slide-bar").addClass("testbox");
        }
      );
    $(".menu-item-452").mouseout(
      function () {
        $(".infinite-navigation-slide-bar").removeClass("testbox");
      },
     );
  });