<div>Hover!</div>
<div class="o-hide"><p>0</p></div>
<div>0</div>

div {
  height: 60px;
  padding: 60px 0;
  width: 180px;
  font-size: 2em;
  line-height: 60px;
  background: pink;
  text-align: center;
  margin: 1%;
  display: block;
  float: left;
  cursor: pointer;
  font-family: 'Lato';
}

.o-hide {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.o-hide:hover {
  position: static;
}

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = count;
});

firstDiv.addEventListener("click", function(){
    oHide.style.position = "static";
});