JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<ul>
    <li data-divid="div1"><a href="#">link 1</a></li>
    <li data-divid="div2"><a href="#">link 2</a></li>
    <li data-divid="div3"><a href="#">link 3</a></li>
    <li data-divid="div4"><a href="#">link 4</a></li>
    <li data-divid="div5"><a href="#">link 5</a></li>
</ul>

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>

CSS

div {
    width:60px;
    height:60px;
    margin: 8px;
    background-color: blue;
    display: none;
    opacity: 0;
}
.hover {
    background-color: #ccc; 
}

JavaScript

$('li').mouseover(function() {
    $(this).addClass('hover');
    $('#' + $(this).data('divid')).stop().css({
        display: 'block'
    }).animate({
        opacity: 1
    }, 500);
});

$('li').mouseout(function() {
    $(this).removeClass('hover');
    $('#' + $(this).data('divid')).stop().animate({
        opacity: 0
    }, 500, function() {
        $(this).hide();
    });
});