admin管理员组

文章数量:1317906

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=".jpg" border="0">
<div id="bottombar">2</div>
</div>

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./tumblr_lltiujAaV81qghzpno1_500.jpg" border="0">
<div id="bottombar">2</div>
</div>
  • javascript
  • html
  • css
  • internet-explorer
Share Improve this question edited Jun 1, 2011 at 19:40 user229044♦ 240k41 gold badges344 silver badges346 bronze badges asked May 26, 2011 at 20:05 James Charless DickinsonJames Charless Dickinson 4465 gold badges17 silver badges42 bronze badges 4
  • IE 8 and 9 support css hover directives on any element, I'm not sure about IE7. IE6 does not. – kennebec Commented May 26, 2011 at 20:13
  • 2 As long as you use a valid doctype, it's only an issue on IE6 and lower. My advice: drop support for IE6. It'll save your sanity. – Spudley Commented May 26, 2011 at 20:15
  • 2 We're currently having a debate over on Meta about whether you actually selected and unselected a bunch of the answers as accepted in quick succession, or if there is a bug in the system. Your input would be appreciated! meta.stackexchange./questions/92858/… (no, you haven't done anything wrong, we're just a bunch of curious worrywarts!) – Adam Davis Commented May 27, 2011 at 3:38
  • please stop beginning your posts with "Hey guys, James here" or the like. Stack Overflow is a reference not a forum, and salutations/signatures/taglines don't belong in your questions. – user229044 ♦ Commented Jun 1, 2011 at 19:42
Add a ment  | 

6 Answers 6

Reset to default 1

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.

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

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

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./jquery/ie6cssfix/

Try adding the strict doctype to the header:

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

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

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

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./epome3/2

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

本文标签： javascriptIs there a IE ahover fixStack Overflow

版权声明：本文标题：javascript - Is there a IE a:hover fix? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742030932a2416429.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。