Javascript On hover

Question

assume I have this sample code:

<div class="class1">
  ... random content
</div>

Now all I want to do is just have a Javascript for on hover of that div, I need to add a css attribute:

background-color:#ffffe0;
border:1px solid #bfbfbf;

Thats really all I wish to achieve, however I wish to do this without jQuery.

EDIT: I don't really need a CSS solution as my application runs in quirks mode, which means it is not compatible in IE.

Answer 1

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
}