Described here is a technique to highlight html elements. We begin with some examples:

Mouse over on the <span> elements below and see the background-color changing:

Mouse over   Mouse over Mouse over Mouse over Mouse over

Mouse over on the <div> elements below and see the background-color changing:

There's an easy way to highlight many html elements, that is by using hover pseudo class. But hover pseudo class has limited browser support and it does not work on some d of elements. For example, it does not work on table-rows on Internet Explorer (as of version 7), but it does work on table-rows on Firefox 2. . Here are some examples of hover style applied to links (<a> elements) and <div>:

a:hover
{
  background-color: #AABBFF;	
}

div.withHover:hover
{
  background-color: #AABBFF;	
}

Now, links will be highlighter when the mouse is hovering over them, such as this link with hover example .

<a href="test">Links with hover</a>

<div class="withHover">Mouse over this <div> element to see the hover.</div>

There are four major steps in our technique:

1. Detecting mouse over.
2. Changing the background color.
3. Detecting mouse out.
4. Restoring the original background color.

Step 1 and 3 are trivial as they can be done by assigning event handlers to onmouseover and onmouseout events. For Step 2, we need to change element.style["backgroundColor"] of the element like below:

function changeBgColor(myEvent, newBgColor)
{
  if (!myEvent)
    myEvent=window.event;
  if (!myEvent)
    return;
  var firingElement=null;
  // Internet Explorer
  if (myEvent.srcElement)
    firingElement=myEvent.srcElement;  

  // Netscape and Firefox
  else if (myEvent.target)
    firingElement=myEvent.target;    

  if (firingElement)
  {
     firingElement.originalBgStyle=firingElement.style["backgroundColor"];
     firingElement.style["backgroundColor"]=newBgColor;
  }	 
}

The blue section shows where the background-color is being changed (not that unlike style definitions which use background-color, you access the stye array by combining the property name and capitalizing the first letter of all the worlds except the first, so background-color becomes backgroundColor

For Step 4 (restoring the original background-color), we need to save the original background-color. This part of the code is marked in red. The other portion of the code pertaining to the firingElement is coded to retrieve the element which fired the event. You can see some browser-specific code there because Mozilla and Internet Explorer has different ways to access this object.

We then use the following function to restore the background color:

function restoreBgColor(myEvent)
{
  if (!myEvent)
    myEvent=window.event;
  if (!myEvent)
	return;
  var firingElement=null;
  // Internet Explorer
  if (myEvent.srcElement)
    firingElement=myEvent.srcElement;  

  // Netscape and Firefox
  else if (myEvent.target)
    firingElement=myEvent.target;    


  if (firingElement)
  {
    firingElement.style["backgroundColor"]=firingElement.originalBgStyle;
  }	 
}

Using the code is as straightforward as this:

<span style="background-color:#999999;"  
  onmouseover="javascript:changeBgColor(event, '#ff0000');" 
  onmouseout="javascript:restoreBgColor(event);">
See me glow
</span>

Mouse over any of the elements below to see the background color changes.

Mouse over Mouse over Mouse over Mouse over Mouse over

In the next section, we will explore "glow" effect.