onMouseOver - Simple background colour change

Below is a styled list. The background colour of the list items are changed in slightly different ways (for comparison) when you mouseover/hover over them. With standard CSS using the :hover pseudo-class on a link within the list-item, using simple (old-style) inline JavaScript and lastly using the more modern DOM, unobtrusive, JavaScript method.

First item - nothing
Second item using inline JavaScript on the onmouseover and onmouseout events (obtrusive) directly on the list-item
Third item using CSS :hover pseudo-class on a link inside the list-item. Using a link tag ensures it will work on IE.
Fourth item using unobtrusive JavaScript directly on the list-item, simply by specifying class="hover"
Fifth item same as the fourth

Unobtrusive JavaScript:


<ol id="hoverlist">
	<li class="hover">List-item</li>			
</ol>


window.onload = function() {
	if (!document.getElementById) {return;}
	var classval;
	// Attach events...
	// Get the hoverlist
	var list = document.getElementById('hoverlist');
	if (list) {
		// Get all the list-items within hoverlist
		var items = list.getElementsByTagName('li');
		// Step through all list items and assign events to those that have class "hover"
		for (var i=0; i < items.length; i++) {
			classval = items[i].getAttribute('class');
			if (classval == 'hover') {
				// Attach events
				items[i].onmouseover = function() {this.style.backgroundColor = 'silver';}
				items[i].onmouseout = function() {this.style.backgroundColor = 'lime';}			 				
			}
		}
	}
}

[Home]

Change the background-color in onMouseOver/onMouseOut events