是否有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：懸停修復？

回答

相關問題