JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<div class="outer">
            OUTER
            <div class="inner">INNER</div>    
        </div>

CSS

.outer {
        padding: 20px;
        background: green;
        margin: 50px 0 0 0;
    }

    .inner {
        display: none;
        background: blue;
        height: 30px;
        width: 300px;
        position: absolute;
        left: 8;
        top: 25;
    }

JavaScript

function test(){
		if($('div.inner').hasClass('x')){
			$('div.inner').css('display','block')
			
			}else{$('div.inner').css('display','none')}
		}
		
    $('div.outer').hover(function(){
		$('div.inner').addClass('x')
		test()
		},function(){
			$('div.inner').removeClass('x')
			test()
	    })