Posted By

skatan on 08/24/07


Tagged

css javascript


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

n00ge
eny_genao


addIEHover


 / Published in: JavaScript
 

IE 5/6 does not support the :hover pseudo-class on any element other than links. This script attaches a .hover class to mimic the :hover pseudo class on IE 5/6.

  1. function addIEHover(arg) {
  2. // check to see if browser supports mouseenter event if not return
  3. if(typeof document.body.onmouseenter != "object") return;
  4. // if passed argument not an array convert it to one
  5. if(!arg.length) {
  6. var elems = [];
  7. elems[0] = arg;
  8. }
  9. else {
  10. var elems = arg;
  11. }
  12. // iterate through array and attach mouseenter event to obejcts passed
  13. // add and remove class="hover" on mousenter/mouseout event
  14. for (var i = 0; i < elems.length; i++) {
  15. elems[i].onmouseenter = function() {
  16. this.className += " hover";
  17. }
  18. elems[i].onmouseleave = function() {
  19. this.className = this.className.replace(/\s*hover/, "");
  20. }
  21. }
  22. }
  23.  
  24. // call function in one of the following Manners
  25. addIEHover([document.getElementById("one"), document.getElementById("two")]);
  26. addIEHover(document.getElementsByTagName("div"));
  27. addIEHover(document.getElementsByTagName("*")); //attach hover class to all element nodes
  28.  
  29. //CSS
  30. /*
  31. nav:hover, nav.hover {
  32.   styles to apply on hover
  33. }
  34.  
  35. */

Report this snippet  

You need to login to post a comment.