JSFiddle - React, Tailwind, and code Playground

by Alexandr Zawgorodniy

HTML

<div class="wrap">
  <div class="in">content</div>
</div>

CSS

.wrap{
	width: 200px;
	height: 200px;
	background: #795548;
	display: inline-block;
}
.in{
	height: 100px;
	opacity: 0;
	background: #009688;
}

JavaScript

document.body.addEventListener('mouseover',fun);
function fun(e){
    if(e.target.classList.contains('wrap')){
        e.target.firstElementChild.style.opacity = 1;
    }
    if(e.target.classList.contains('in')){
        e.target.style.opacity = 1;
    }
}
document.body.addEventListener('mouseout',fun2);
function fun2(e){
    if (e.target.classList.contains('wrap')){
        e.target.firstElementChild.style.opacity = 0;
    }
    if (e.target.classList.contains('in')){
        e.target.style.opacity = 0;
    }
}