onmouseout
In this chapter you will learn:
Handling mouse out event
<!DOCTYPE HTML><!-- j a va 2 s.c o m-->
<html>
<head>
<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>
Register event handler inline
We can also register event handler inline.
<!DOCTYPE HTML><!-- j a v a 2 s .c om-->
<html>
<head>
<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>
Next chapter...
What you will learn in the next chapter: