Question

function hoverHandler(e)
{
if(event.target.getAttribute("id") != "hovering")
{
    event.target.setAttribute("id", "hovering");
}
}

This is the code I have, I also have a CSS that sets the color when id is hovering.

The problem:
1) As I am hovering, the color does not get reset back to previous color when I leave the element

Answer 1

try adding, and make sure your checking for onmouseout as well

 <script>
 function hoverHandler(e)
  {
 if(e.id=="red")    // hovering
 {
 e.id="blue"; 
 }else {
e.id="red"; 
 }
 }
 </script>
<span onmouseover="hoverHandler(this)" onmouseout="hoverHandler(this)">test</span>

or an inline event handlers could be

<style>#startStyle {color:lime} #red {color:red}#blue{color:blue}</style>


 <span onmouseover="this.id='red'" onmouseout="this.id=''">test</span>

onmouseout would default back to the base style if any; or

 <span onmouseover="this.id='red'" onmouseout="this.id='startStyle'">test</span>