Geek asks and answers

Is there a IE a: hover fix?

I am working on a website design and I have some image hover effects that include elements on the image that appear when you hover over the image. It works fine on Chome, Safari, and FF, but it doesn't work on IE, because in IE the code: hover ONLY only works on: hover. Is there any way to either install a javascript fix for this, or add a binding to the whole div so that it works on every browser? Here is my code:

    <html>
<head>
<style>
body { background: #FFF; }

#postimage {
width: 500px;
height: 335px;
}

#topbar {
width: 500px;
background: rgba(0, 0, 0, 0.75);
height: 50px;
position: absolute;
z-index: 999;
}

#bottombar {
width: 500px;
background: rgba(0, 0, 0, 0.75);
height: 50px;
position: absolute;
z-index: 999;
margin-top: -50px;
}

#postimage div#bottombar{
    display: none;
}

#postimage:hover div#bottombar {
    display: inline;
}

#postimage div#topbar{
    display: none;
}

#postimage:hover div#topbar {
    display: inline;
}

</style>
</head>
<body>
<div id="postimage">
<div id="topbar">1</div>
<img src="http://28.media.tumblr.com/tumblr_lltiujAaV81qghzpno1_500.jpg" border="0">
<div id="bottombar">2</div>
</div>
+3
source share
6 answers

This issue with IE hovering working only with elements <a>is only a problem with IE6 and below.

- IE6. , . ( IE6 , ). , , , .

, , , IE6, , , , .

CSS : hover. , , hover IE6. .

+1

javascript : hover fix IE 6 +

$.ie6CssFix = function() {

        if($.browser.msie && $.browser.version < 7) {


            var cssRules = [], newStyleSheet = document.createStyleSheet();

            $("style,link[type=text/css]").each(function() {

                    if(this.href) {
                        $.get(this.href,function(cssText) {
                            parseStyleSheet(cssText);
                        }); 
                    } else {
                        parseStyleSheet(this.innerHTML);
                    }
            });

            function parseStyleSheet(cssText) {
                var cssText = cssText.replace(/\s+/g,'');
                var arr = cssText.split("}");
                var l = arr.length;
                for(var i=0; i < l; i++) {
                    if(arr[i] != "") {
                        parseRule(arr[i] + "}");    
                    }
                }
            }

            function parseRule(rule) {


                var pseudo = rule.replace(/[^:]+:([a-z-]+).*/i, '$1');

                if(/(hover|after|focus)/i.test(pseudo)) {

                    var prefix = "ie6fix-";
                    var element = rule.replace(/:(hover|after|before|focus).*$/, '');
                    var className = prefix + pseudo;
                    var style = rule.match(/\{(.*)\}/)[1];

                    var h =  getPseudo(pseudo);
                    if(h) {
                        h(element,className);
                    }

                    newStyleSheet.addRule(element + "." + className,style);
                }
            }

            function handleHover(e,c) {
                $(e).hover(function() {$(this).addClass(c);}, function() {$(this).removeClass(c);});
            }

            function handleFocus(e,c) {
                $(e).focus(function() { $(this).addClass(c); }).blur(function() {$(this).removeClass(c);});
            }

            function handleAfter(e,c) {
                $(e).after(
                    $("<" + e + "></" + e + ">").addClass(c)
                );
            }

            function getPseudo(pseudo) {
                switch (pseudo) {
                    case "hover": return handleHover;
                    case "focus": return handleFocus;
                    case "after": return handleAfter;
                    default: return false;
                }

            }
        }
    };

    $(function() {
        $.ie6CssFix();
    });

: http://lovepeacenukes.com/jquery/ie6cssfix/

+1

doctype :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

. Theres : hover. .

+1

, , :hover <li> IE:

http://peterned.home.xs4all.nl/htc/csshover3.htc http://peterned.home.xs4all.nl/csshover.html. IE, GNU Lesser General Public.

css:

body
{
    behavior: url("/css/csshover3.htc"); /* This is an IE-only property that fixes the fact the ":hover" doesn't work on all elements in IE. */
}
+1

IE, IE,: : hover

IE6 , IE Quirks.

doctype , IE7 +

- HTML5 doctype:

<!DOCTYPE html>

, , IE:

background: rgba(0, 0, 0, 0.75);

rgba IE 9.

Here is a version of your page that will work in older versions, because I added a backup backgroundfrom #000to prove that it :hoverworks in IE:

http://jsbin.com/epome3/2

I also changed display: inlineto display: blockbecause it should be.

+1
source

More articles:


All Articles