Add fade effect with mouse over event - Javascript DOM

Javascript examples for DOM:Mouse Event

  1. HOME
  2. Javascript
  3. DOM
  4. Mouse Event

Description

Add fade effect with mouse over event

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <title>example</title> 
      <style>

div{//w w  w.j  a v a2s.  c  o  m
   background-color:#fc0;
   -webkit-transition:opacity 1500ms ease;
   opacity:1;
}
div.hide{
   opacity:0;
}

      </style> 
      <script>
var changeclass=function(){
 this.classList.add('hide');
}
window.onload=function(){
 var firstDiv=document.getElementsByTagName('div')[0];
 firstDiv.addEventListener('mouseover',changeclass,false);
}

      </script> 
   </head> 
   <body> 
      <div>
         Hello
      </div>  
   </body>
</html>

Related Tutorials