[Solved] Javascript On hover

Hope this helps:

http://jsbin.com/podip/2/edit

// IE6 does not support getElementsByClassName so...

function getElementsByClassName(className) { // http://stackoverflow.com/questions/6584635/getelementsbyclassname-doesnt-work-in-ie6
  var elz = [];
  var elements = document.getElementsByTagName("*");
  for (var i = 0; i < elements.length; i++) {
    var names = elements[i].className.split(' ');
    for (var j = 0; j < names.length; j++) {
      if (names[j] == className) elz.push(elements[i]);
    }
  }
  return elz;
}

// I like to use this nice function of mine to play with styles:

function css( el, obj ){
  if(typeof obj == "object" ){
    for(var k in obj){
      el.style[k] = obj[k];
   }
  } // else, it's not an {} so you might want to handle 'string' here... 
}

var $cl1 = getElementsByClassName("class1"); // Let's use now our fn

function hoverEvents( element ){
  element.onmouseenter = function(){
    css( element, {
      backgroundColor: "#ffffe0",
      border : "1px solid #bfbfbf"
    });
  };
  element.onmouseleave = function(){
    css( element, {
      backgroundColor: "transparent",
      border : "none"
    });
  };
}

// Set hover states by passing the element to our hoverEvents fn

for(var i=0; i<$cl1.length; i++){
  hoverEvents( $cl1[i] ); // bound listeners to all our elements
}