Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
  <body>
    
    <div id="box"></div>    
     <div id="overlay"></div>
    <div id ="pointer"></div>
  </body>
</html>
 
#box{
  width:100px;
  height:100px;
  background-color:red;}
​
#overlay{
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.2);
    z-index: 1000;
    text-align: center;
  display:none;
}
 
​
document.getElementById("box")
  .addEventListener("click", function(){
 document.getElementById("overlay").
  style.display= 'block';
  setTimeout(function(){
     document.getElementById("overlay").
  style.display= 'none'
    
  },2000)
 
});
document.getElementById("box")
  .addEventListener("pointerout", function(){
​
console.log('pointerout');
  let element= document.createElement('div');
  element.innerText ='Pointer out is called';
  document.getElementById('pointer').appendChild(element);
});
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers