是否有 IE a:hover 修复？答案

【问题标题】：Is there a IE a:hover fix?是否有 IE a:hover 修复？
【发布时间】：2011-06-02 03:40:22
【问题描述】：

我正在做一个网站设计，我有一些图像悬停效果，当您将鼠标悬停在图像上时，图像上的元素会显示出来。它在 Chome、Safari 和 FF 上运行良好，但在 IE 上不起作用，因为在 IE 上，:hover 代码只能在 a:hover 上运行。有没有办法为此提供一个 javascript 修复程序，或者向整个 div 添加一个锚点，以便它适用于每个浏览器？这是我的代码：

    <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>

【问题讨论】：

IE 8 和 9 支持任何元素上的 css 悬停指令，我不确定 IE7。 IE6 没有。
只要您使用有效的文档类型，它只是在 IE6 及更低版本上的问题。我的建议：放弃对 IE6 的支持。它会拯救你的理智。
我们目前正在就 Meta 进行辩论，关于您是否真的选择和取消选择了一系列快速连续接受的答案，或者系统中是否存在错误。您的意见将不胜感激！ meta.stackexchange.com/questions/92858/…（不，你没有做错什么，我们只是一群好奇的忧郁症！）
请不要以“嘿，伙计们，詹姆斯在这里”或类似的方式开始您的帖子。 Stack Overflow 是参考而非论坛，称呼/签名/标语不属于您的问题。

标签： javascript html css internet-explorer

【解决方案1】：

IE 的悬停问题仅适用于 <a> 元素仅适用于 IE6 及更低版本。

我的第一个建议是直接放弃对 IE6 的支持。它确实有太多的问题，而且市场份额太低，以至于现在不值得支持。（IE6 的市场份额已经很低，但在过去六个月左右的时间里跌到了悬崖边）。如果你的老板或客户坚持要你支持它，你应该提前告诉他们这将使开发和维护成本翻倍。

但是，我承认某些网站在某些情况下需要它们继续支持 IE6，所以如果是您，您会很高兴知道悬停错误有一个非常简单的修复方法。

有一个名为 Whatever:hover 的 CSS hack。只需下载该页面上的文件，按照说明将其链接到您的样式表，悬停就可以在 IE6 中的任何地方工作。魔法。

【讨论】：

【解决方案2】：

是的，例如 jQuery 的 .mouseenter() 和 .mouseleave() 方法。

此外，您可能还需要.toggle() 和.css()。

【讨论】：

【解决方案3】：

试试这个 javascript 添加 :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();
    });

您可以通过以下方式验证：http://lovepeacenukes.com/jquery/ie6cssfix/

【讨论】：

【解决方案4】：

尝试将严格的文档类型添加到标题中：

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

这应该有助于修复它。还有一个名为whatever:hover 的修复程序。我还没有尝试过。

【讨论】：

【解决方案5】：

这是我们在我们的一个网站上所做的，以使 :hover 在 IE 中处理 <li> 元素：

从http://peterned.home.xs4all.nl/csshover.html 获取文件http://peterned.home.xs4all.nl/htc/csshover3.htc。这是一个 IE 行为文件，作者根据 GNU Lesser General Public License 对其进行许可。

然后在你的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. */
}

【讨论】：

【解决方案6】：

它在 IE 上不起作用，因为在 IE 上， :hover 代码仅适用于:hover

这仅适用于 IE6 或更新版本当 IE 位于 Quirks Mode 时。

在第一行添加一个文档类型，它可以在 IE7+ 中工作

最好的选择是 HTML5 文档类型：

<!DOCTYPE html>

您的页面还有一个问题会使其在 IE 中看起来好像无法正常工作：

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

rgba is not supported 在 IE 中直到版本 9。

这是您的页面的一个版本，可以在旧版本中使用，因为我添加了 #000 的后备 background，只是为了证明 :hover 在 IE 中有效：

http://jsbin.com/epome3/2

我还将display: inline 更改为display: block，因为它应该是这样的。

【讨论】：