onmouseout

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
  background: gray;
  color: white;
  padding: 10px;
  margin: 5px;
  border: thin solid black
}
</style>
</head>
<body>
  <p>This is a test. 
  </p>
  <p>This is a test. 
  </p>
  <script type="text/javascript">
    var pElems = document.getElementsByTagName("p");
    for ( var i = 0; i < pElems.length; i++) {
      pElems[i].onmouseover = handleMouseOver;
      pElems[i].onmouseout = handleMouseOut;
    }
    function handleMouseOver(e) {
      e.target.style.background = 'white';
      e.target.style.color = 'black';
    }
    function handleMouseOut(e) {
      e.target.style.removeProperty('color');
      e.target.style.removeProperty('background');
    }
  </script>
</body>
</html>
  
Click to view the demo

We can also register event handler inline.

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
  background: gray;
  color: white;
  padding: 10px;
  margin: 5px;
  border: thin solid black
}
</style>
</head>
<body>
  <p onmouseover="this.style.background='white'; this.style.color='black'"
    onmouseout="this.style.removeProperty('color'); 
        this.style.removeProperty('background')">
    This is a test. 
    </p>
</body>
</html>
  
Click to view the demo
Home 
  JavaScript Book 
    DOM  

HTMLElement:
  1. The HTMLElement Members
  2. element tag name, id, direction, language, hidden disabled information
  3. addEventListener
  4. appendChild
  5. attributes returns a collection containing all of the attributes
  6. classList
  7. className
  8. cloneNode
  9. createElement
  10. createTextNode
  11. dataset
  12. getAttribute
  13. getElementsByTagName
  14. hasAttribute
  15. innerHTML
  16. insertAdjacentHTML
  17. insertBefore
  18. isSameNode
  19. outerHTML
  20. onmouseout
  21. onmouseover
  22. querySelectorAll
  23. removeEventListener