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") {
        setTimeout(function(){
              two.style.display = "";
        }, 200)
    

        }

      }

    </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;
}