JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div><a href="#" id="btn">Show Back</a></div>
<div><a href="#" id="btn-bk">Show Fancy</a></div>
<div><a href="#" id="btn-cc">Show Cart</a></div>
<div><a href="#" id="btn-tt">Show Tasty</a></div>
<br>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
<div id="cart">Cart Div</div>
<div id="tasty">Tasty Div</div>

CSS

#bank {display:none;}

JavaScript

$('#btn').hover(
    function(e){    
        $('#bank').show();
  },
  function(e){
    $('#fancy, #bank,#tasty, #cart').hide();
  }
);


$('#btn-bk').hover(
    function(e){    
        $('#fancy').show();
  },
  function(e){
    $('#fancy, #bank, #tasty, #cart').hide()
  }
);


$('#btn').hover(
    function(e){    
        $('#bank').show();
  },
  function(e){
    $('#fancy, #bank,#tasty, #cart').hide();
  }
);


$('#btn-bk').hover(
    function(e){    
        $('#fancy').show();
  },
  function(e){
    $('#fancy, #bank, #tasty, #cart').hide()
  }
);