Posted By

jonhenshaw on 01/01/07


Tagged

css javascript ie ie6 hover internet explorer


Versions (?)

Who likes this?

15 people have marked this snippet as a favorite

Hirmine
indianocean
springett
koncept
pierre
DataSquirrel
marcoba
aziz
Mithun
visuallyspun
stoker
SpinZ
JimiJay
titox
ozayo


Internet Explorer (IE6) CSS Hover


 / Published in: CSS
 

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

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"); }

  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>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: revmitcz on March 4, 2008

Wouldn't it be simpler to just use a single line of jquery? Or, since hovers are generally to alert a user that "hey, this can be clicked on" - just use spans inside an anchor tag. You can then set special hovers on the spans (or anything else within an anchor tag) as :

a:hover span { special span code }

Posted By: Wizz on June 24, 2009

This trick works like a charm!

@revmitcz You could do that to make IE6 play nice, but why pollute your nice and mark-up to accommodate an obsolete browser as IE6?

Standards compliant HTML is not just about getting it through the validator... too many clutter in the mark-up can make screen readers and search bots go crazy...

Posted By: mangesh5588 on September 15, 2009

rock man this works! thanks thanks a lot! Keep it up!

Posted By: priya_2001 on January 4, 2010

Thanks a lot.......... due to this i was out of my 5 days struggle. kudos to u u r great... and i dont know how to express my happiness to fix this bug... thanks again a ton.............

Posted By: 2dareis2do on October 5, 2010

awesome - very useful script

Posted By: 2dareis2do on October 5, 2010

awesome - very useful script

Posted By: 2dareis2do on October 5, 2010

awesome - very useful script

You need to login to post a comment.