CODEWITHSUNDEEP
javascripthtmlcssinternet-explorer
James Charless Dickinson
James Charless Dickinson

Reputation: 446

Is there a IE a:hover fix?

I'm working on a website design, and I have some image hover effects that involve elements on the image showing up when you hover over the image. It works fine on Chome, Safari and FF, but It doesn't work on IE, because on IE, the :hover code ONLY works on a:hover. Is there any way to either supply a javascript fix for this, or add an anchor to the whole div so it works on every browser? Here's 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>

Upvotes: 3

Views: 4701

Answers (6)

thirtydot
thirtydot

Reputation: 228162

It doesn't work on IE, because on IE, the :hover code ONLY works on a:hover

This is only true for IE6, or for newer versions when IE is in Quirks Mode.

Add a doctype as the very first line, and it will work in IE7+

The best choice is this, the HTML5 doctype:

<!DOCTYPE html>

There is one other problem with your page that will make it appear as though it's not working in IE:

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

rgba is not supported in IE until version 9.

Here's a version of your page that will work in older versions, because I added a fallback background of #000, just to prove the :hover does work in IE:

http://jsbin.com/epome3/2

I also changed display: inline to display: block, because that's what it should be.

Upvotes: 1

Spudley
Spudley

Reputation: 168685

This problem with IE's hover only working on <a> elements is only an issue with IE6 and lower.

My first advice is to simply drop support for IE6. It really does have far too many issues, and far too low market share to make it worthwhile supporting these days. (the market share for IE6 was low already, but has dropped off a cliff in the last six months or so). If your boss or client insists on you supporting it, you should tell them up front that it will double the cost of development and maintenance.

However, I accept that some sites have circumstances that require them to continue supporting IE6, so if that's you, you'll be pleased to know that there is a very easy fix for the hover bug.

There is a CSS hack called Whatever:hover. Just download the file on that page, link it into your stylesheet as instructed, and hover will work everywhere in IE6. Magic.

Upvotes: 1

Joshua Carmody
Joshua Carmody

Reputation: 13730

This is what we did on one of our websites to get :hover working on <li> elements in IE:

Get the file http://peterned.home.xs4all.nl/htc/csshover3.htc from http://peterned.home.xs4all.nl/csshover.html. This is an IE behavior file and the author licenses it under the GNU Lesser General Public License.

Then in your css file:

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. */
}

Upvotes: 1

zach
zach

Reputation: 478

Try adding the strict doctype to the header:

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

That is supposed to help fix it. Theres also a fix called whatever:hover. I havent tried that though.

Upvotes: 1

Uncle Dan
Uncle Dan

Reputation: 3290

Try this javascript to add :hover fix in 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();
    });

You can verify this on : http://lovepeacenukes.com/jquery/ie6cssfix/

Upvotes: 1

Tadeck
Tadeck

Reputation: 137320

Yes, see for example jQuery's .mouseenter() and .mouseleave() methods.

Additionally you may need .toggle() and .css().

Upvotes: 1

Related Questions