JSFiddle - React, Tailwind, and code Playground

by simevidas

HTML

<div class="one">content1</div>
<div class="two">content2</div>

<div class="one">content3</div>
<div class="two">content4</div>

<div class="one">content5</div>
<div class="two">content6</div>

CSS

div {
    margin:10px;
    font-size:30px; 
    background:#ddd;
}

div.two { display:none; }

JavaScript

$('div.one').mouseenter(function() {
    $(this).hide().next().show();
});

$('div.two').mouseleave(function() {
    $(this).hide().prev().show();    
});