Internet Explorer (IE6) CSS Hover


/ Published in: CSS

IE6 and before doesn't support :hover in CSS (except for anchors). You can use this script to make hovers work in IE. Just add the following line to your stylesheet (this assumes the path of the file -- you may need to change it to reflect your paths).

body { behavior:url("csshover.htc"); }


Copy this code and paste it in your HTML
  1. <attach event="ondocumentready" handler="parseStylesheets" />
  2. <script>
  3. /**
  4.  * Whatever:hover - V1.42.060206 - hover & active
  5.  * ------------------------------------------------------------
  6.  * (c) 2005 - Peter Nederlof
  7.  * Peterned - http://www.xs4all.nl/~peterned/
  8.  * License - http://creativecommons.org/licenses/LGPL/2.1/
  9.  *
  10.  * Whatever:hover is free software; you can redistribute it and/or
  11.  * modify it under the terms of the GNU Lesser General Public
  12.  * License as published by the Free Software Foundation; either
  13.  * version 2.1 of the License, or (at your option) any later version.
  14.  *
  15.  * Whatever:hover is distributed in the hope that it will be useful,
  16.  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  17.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
  18.  * Lesser General Public License for more details.
  19.  *
  20.  * Credits and thanks to:
  21.  * Arnoud Berendsen, Martin Reurings, Robert Hanson
  22.  *
  23.  * howto: body { behavior:url("csshover.htc"); }
  24.  * ------------------------------------------------------------
  25.  */
  26.  
  27. var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
  28. currentSheet, doc = window.document, hoverEvents = [], activators = {
  29. onhover:{on:'onmouseover', off:'onmouseout'},
  30. onactive:{on:'onmousedown', off:'onmouseup'}
  31. }
  32.  
  33. function parseStylesheets() {
  34. if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
  35. window.attachEvent('onunload', unhookHoverEvents);
  36. var sheets = doc.styleSheets, l = sheets.length;
  37. for(var i=0; i<l; i++)
  38. parseStylesheet(sheets[i]);
  39. }
  40. function parseStylesheet(sheet) {
  41. if(sheet.imports) {
  42. try {
  43. var imports = sheet.imports, l = imports.length;
  44. for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
  45. } catch(securityException){}
  46. }
  47.  
  48. try {
  49. var rules = (currentSheet = sheet).rules, l = rules.length;
  50. for(var j=0; j<l; j++) parseCSSRule(rules[j]);
  51. } catch(securityException){}
  52. }
  53.  
  54. function parseCSSRule(rule) {
  55. var select = rule.selectorText, style = rule.style.cssText;
  56. if(!csshoverReg.test(select) || !style) return;
  57.  
  58. var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
  59. var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
  60. var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
  61. var affected = select.replace(/:(hover|active).*$/, '');
  62. var elements = getElementsBySelect(affected);
  63. if(elements.length == 0) return;
  64.  
  65. currentSheet.addRule(newSelect, style);
  66. for(var i=0; i<elements.length; i++)
  67. new HoverElement(elements[i], className, activators[pseudo]);
  68. }
  69.  
  70. function HoverElement(node, className, events) {
  71. if(!node.hovers) node.hovers = {};
  72. if(node.hovers[className]) return;
  73. node.hovers[className] = true;
  74. hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
  75. hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
  76. }
  77. function hookHoverEvent(node, type, handler) {
  78. node.attachEvent(type, handler);
  79. hoverEvents[hoverEvents.length] = {
  80. node:node, type:type, handler:handler
  81. };
  82. }
  83.  
  84. function unhookHoverEvents() {
  85. for(var e,i=0; i<hoverEvents.length; i++) {
  86. e = hoverEvents[i];
  87. e.node.detachEvent(e.type, e.handler);
  88. }
  89. }
  90.  
  91. function getElementsBySelect(rule) {
  92. var parts, nodes = [doc];
  93. parts = rule.split(' ');
  94. for(var i=0; i<parts.length; i++) {
  95. nodes = getSelectedNodes(parts[i], nodes);
  96. } return nodes;
  97. }
  98. function getSelectedNodes(select, elements) {
  99. var result, node, nodes = [];
  100. var identify = (/\#([a-z0-9_-]+)/i).exec(select);
  101. if(identify) {
  102. var element = doc.getElementById(identify[1]);
  103. return element? [element]:nodes;
  104. }
  105.  
  106. var classname = (/\.([a-z0-9_-]+)/i).exec(select);
  107. var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
  108. var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
  109. for(var i=0; i<elements.length; i++) {
  110. result = tagName? elements[i].all.tags(tagName):elements[i].all;
  111. for(var j=0; j<result.length; j++) {
  112. node = result[j];
  113. if(classReg && !classReg.test(node.className)) continue;
  114. nodes[nodes.length] = node;
  115. }
  116. }
  117.  
  118. return nodes;
  119. }
  120. </script>

URL: http://www.xs4all.nl/~peterned/csshover.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.