advanced code snippet search

Posted By

mihael on 01/26/09


Tagged

dropdown ie6 hover shover


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

enajenkins
darkapple


IE6 - :hover fix (shover) - simplified

 / Published in: JavaScript
 

This is the javascript code that enables you to create hover effects also in IE6. It's clean, it's light, it's super! :)

Apply that code to your document (eg. in ) and in css add like this:

ul li:hover, ul li.shover { your css styles }

Explain: IE6 will on mouse over element add .shover to that element.

Expand | Embed | Plain Text 
  1. <!--[if lte IE 6]> 
  2. <script type="text/javascript">
  3. sfHover = function() {
  4. 	var sfEls = document.getElementById("mainNav").getElementsByTagName("LI");
  5. 	for (var i=0; i<sfEls.length; i++) {
  6. 		sfEls[i].onmouseover=function() {
  7. 			this.className+=" sfhover";
  8. 		}
  9. 		sfEls[i].onmouseout=function() {
  10. 			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  11. 		}
  12. 	}
  13. }
  14. if (window.attachEvent) window.attachEvent("onload", sfHover);
  15. </script>
  16. <![endif]-->

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: mihael on January 26, 2009

oh, I forgot!!! ... change the "mainNav" to your ID! :) that's ID of your UL element.

Posted By: mihael on January 26, 2009

Please, forgive me... another bug in my submission... Apply that code to your document (eg. in ) and in css add like this -> ul li:hover, ul li.sfhover { your css styles }

Posted By: cardsmoney on January 26, 2010

like this?

css: .flameone:hover, .flameone.shover { background:url(img/act_h.png) no-repeat -5px 0; }

html

    1

or something wrong?? ps i have gradient background for a:hover it doesn't work..((

Posted By: cardsmoney on January 26, 2010

Likee this?

css:

.flameone:hover, .flameone.shover { background:url(img/act_h.png) no-repeat -5px 0; }

html

    1





  sfHover = function() {

  var sfEls = document.getElementById("mainNav").getElementsByTagName("LI");

  for (var i=0; i
Posted By: cardsmoney on January 26, 2010

Likee this?

css:

.flameone:hover, .flameone.shover { background:url(img/act_h.png) no-repeat -5px 0; }

html

head> 1

Posted By: cardsmoney on January 26, 2010

Likee this?

css:

.flameone:hover, .flameone.shover { background:url(img/act_h.png) no-repeat -5px 0; }

html

[URL=http://www.radikal.ru][IMG]http://s11.radikal.ru/i183/1001/42/583df936f42e.jpg[/IMG][/URL]

or something wrong?? ps i have gradient background for a:hover it doesn't work..((

Posted By: cardsmoney on January 26, 2010

Likee this?

css:

.flameone:hover, .flameone.shover { background:url(img/act.png) no-repeat -5px 0; }

html

http://s11.radikal.ru/i183/1001/42/583df936f42e.jpg

or something wrong?? ps i have gradient background for a:hover it doesn't work..((

Posted By: mihael on June 29, 2010

in this case... you should have: ** .flameone:hover, .flameone.sfhover**

that's "sfhover" and NOT shover

You need to login to post a comment.