JSFiddle - React, Tailwind, and code Playground

by nimeshrmr

HTML

<ul class='sidebar-iproducts-ul'>
     <li>IPuzzles1
         <div class='description'>This is some description1</div>
     </li>
     <li>IPuzzles2
        <div class='description'>This is some description2</div>
     </li>
     <li>IPuzzles3
         <div class='description'>This is some description3</div>
     </li>
     <li>IPuzzles4
         <div class='description'>This is some description4</div>
     </li>
     <li>IPuzzles5
         <div class='description'>This is some description5</div>
     </li>
     <li>IPuzzles6
         <div class='description'>This is some description6</div>
     </li>
</ul>

CSS

li{
 display: block;
 width: 100px; 
}

.description{
  display:none;
  height: 100px;
  width: 100px;
}

JavaScript

$('ul.sidebar-iproducts-ul li').mouseover(function(){
    $(this).siblings().css('display', 'none');
    $(this).children().css('display', 'block');
});

$('div').mouseout(function(){
    $('ul.sidebar-iproducts-ul li').css('display', 'block');
    $(this).css('display', 'none');
});