<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: gray;
color: white;
}
</style>
</head>
<body>
<p>This is a test.
</p>
<p id="block2">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 = handleMouseEvent;
pElems[i].onmouseout = handleMouseEvent;
}
function handleMouseEvent(e) {
if (e.type == "mouseover") {
e.target.innerHTML += "mouseover";
e.target.style.background = 'white';
e.target.style.color = 'black';
} else {
e.target.style.removeProperty('color');
e.target.style.removeProperty('background');
}
}
</script>
</body>
</html>