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.

  1. First item - nothing
  2. Second item using inline JavaScript on the onmouseover and onmouseout events (obtrusive) directly on the list-item
  3. Third item using CSS :hover pseudo-class on a link inside the list-item. Using a link tag ensures it will work on IE.
  4. Fourth item using unobtrusive JavaScript directly on the list-item, simply by specifying class="hover"
  5. 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]