JSFiddle - React, Tailwind, and code Playground

by Vasya88

HTML

<!doctype html>
<html>

<head>


<script>

	function foo() {

		var one = document.getElementById("pp");
		
		one.addEventListener("mouseover", show);
		one.addEventListener("mouseout", hide);
	}
	
	window.onload=foo;
		
	function show(e){
		
		var e = e.srcElement;
		var two = document.getElementById("dd");
		
		if(two.style.display==""){
			two.style.display="block";
			}
	}
	
	function hide(e){
		
		var e = e.srcElement;
		var two = document.getElementById("dd");
		
		if(two.style.display=="block"){
			two.style.display="";
			
		}
     setTimeout(hide, 3000);
	}

</script>


</head>

<body>

<div id= "pp" ></div>
<div id= "dd" ></div>

</body>

</html>

CSS

#pp {
		background: blue;
		width: 300px;
		height: 100px;
	}

	#dd {
		display: none;
		background: yellow;
		width: 300px;
		height: 100px;
	}