Question

我正在进行网站设计，并且我有一些图像悬停效果，当您将鼠标悬停在图像上时，这些效果会显示图像上的元素。它在Chome，Safari和FF上工作正常，但它不适用于IE，因为在IE上，：hover代码仅适用于：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>

Answer 1

是的，请参阅jQuery的.mouseenter()和.mouseleave()方法。

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

Answer 2

尝试使用此javascript添加：在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/

上验证这一点

Answer 3

尝试将严格的doctype添加到标题中：

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

这应该有助于修复它。还有一个称为无所谓的修复：悬停。我没试过这个。

Answer 4

这是我们在其中一个网站上为了:hover处理IE中的<li>元素所做的工作：

从http://peterned.home.xs4all.nl/htc/csshover3.htc获取文件http://peterned.home.xs4all.nl/csshover.html。这是一个IE行为文件，作者根据GNU宽通用公共许可证授权。

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

Answer 5

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

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

添加doctype作为第一行，它将在IE7 +

中工作

最好的选择是HTML5 doctype：

<!DOCTYPE html>

您的网页还有一个问题，就是它似乎无法在IE中运行：

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

IE中的

rgba is not supported直到第9版。

以下是适用于旧版本的页面版本，因为我添加了background的{{1}}，只是为了证明#000在IE中有效：

http://jsbin.com/epome3/2

我还将:hover更改为display: inline，因为它应该是它。

Answer 6

IE的悬停只能处理<a>元素的问题只是IE6及更低版本的问题。

我的第一个建议就是放弃对IE6的支持。它确实有太多的问题，而且市场份额太低，不值得支持这些日子。（IE6的市场份额已经很低，但在过去六个月左右已经下降了悬崖）。如果您的老板或客户坚持要求您支持，您应该事先告诉他们，这会使开发和维护成本翻倍。

但是，我接受某些网站的情况需要他们继续支持IE6，所以如果是你，你会很高兴知道有一个非常简单的修复悬停bug。

有一个名为Whatever:hover的CSS黑客攻击。只需在该页面上下载该文件，按照说明将其链接到您的样式表，并且悬停将在IE6中的任何位置工作。魔法。

是否有IE a：悬停修复？

6 个答案: