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