JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="box1">1</div>
<div class="box2">2</div>

CSS

.box1,.box2
{
    background-color:red;
    width:100px;
    height:100px;
    margin-left:10px;
    color:#FFF;
    line-height:100px;
    text-align:center;
    font-weight:bolder;
    display:block;
    -webkit-box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 10px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 10px 5px 0px rgba(50, 50, 50, 0.75);
    position:relative;
    z-index:999;
}

.box2
{
    opacity:0;
    background-color:green;
    display:block;
    position:relative;
    z-index:1;
}

JavaScript

$( document ).ready(function() {
    $( ".box1" ).mouseenter(function() {
      $( ".box2" ).css('opacity','1')
    });
    $( ".box1" ).mouseleave(function() {
      $( ".box2" ).css('opacity','0')
    });
});