<div>Hover!</div>
<div class="o-hide">0</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 {
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}
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.className = "";
});
This Pen doesn't use any external JavaScript resources.