是否有IE a：悬停修复？

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

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

来源

2011-05-26 James Charless Dickinson

IE 8和9支持任何元素的CSS悬停的指示，我不知道IE7。 IE6没有。 – kennebec 2011-05-26 20:13:56

只要您使用有效的文档类型，这只是IE6及更低版本的问题。我的建议是：放弃对IE6的支持。它会保存你的理智。 – Spudley 2011-05-26 20:15:57

我们目前有争论关于是否实际选择和未选中一堆答案为接受临门，或如果在系统中的错误元。您的意见将不胜感激！ http://meta.stackexchange.com/questions/92858/whats-wrong-with-timeline（不，你没有做错任何事，我们只是一群好奇的忧心忡忡！） – 2011-05-27 03:38:13

这个问题与IE浏览器的悬停只能在<a>元素工作仅与IE6和低的问题。

我的第一个建议是简单地放弃对IE6的支持。它确实有太多问题，而且市场份额太低，以至于无法支持这些日子。（IE6的市场份额已经很低，但在过去六个月内已经下降了）。如果你的老板或客户坚持要你支持它，你应该告诉他们，这会使开发和维护成本增加一倍。

不过，我承认有些网站要求他们继续支持IE6的情况下，因此，如果这是你，你会很高兴地知道，有对悬停错误很容易解决。

有一个叫Whatever:hover一个CSS破解。只需下载该页面上的文件，按照指示将其链接到您的样式表中，并且悬停在IE6中随处可用。魔法。

来源

2011-05-26 20:14:29 Spudley

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

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

来源

2011-05-26 20:08:34 Tadeck

试试这个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/

来源

2011-05-26 20:08:45

尝试添加严格的DOCTYPE的标题：

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

这应该有助于解决它。 Theres还解决了一个问题：悬停。但我没有尝试过。

来源

2011-05-26 20:12:40 zach

这就是我们所做的事情在我们的网站之一，得到: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. */ 
}

来源

2011-05-26 20:13:12

它不能在IE浏览器，因为IE浏览器，的：悬停代码仅适用于一：悬停

这是只适用于IE6或更新版本当IE在Quirks Mode。

添加DOCTYPE作为第一行，它会在IE7 +

最好的选择是这样的，HTML5的DOCTYPE工作：

<!DOCTYPE html>

还有另外一个问题，您的页面，这将使它看起来好像它不工作在IE：在IEü

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

rgba is not supported第9版。

这是你的第一个版本将在旧版本的工作，因为我加了一个备用的#000background，只是为了证明:hover并在IE工作：

http://jsbin.com/epome3/2

我也改变display: inline到display: block，因为这应该是。

来源

2011-05-26 20:13:49 thirtydot

是否有IE a：悬停修复？

回答

相关问题