鼠標懸停灰度圖不能在IE9中工作

Question

我在IE9中遇到了一些鼠標懸停狀態問題，並希望有人能幫助我。

這個元素將是各種尺寸，所以這就是爲什麼我不願意使用背景圖像精靈。

我的問題是，當我將鼠標懸停在圖像變成灰色的項目，然而，當我將鼠標懸停在中間灰度效果蜱丟失，如我猜測IE9認爲我不再徘徊在項目， 當我。

http://www.tindlemanor.co.uk/jtest/cameron/11.html

我打了關於與鼠標移到例如在jQuery和它在IE9的作品，所以我guesing我做的東西有點傻了。

它適用於所有其他瀏覽器，包括ie8和ie7，如果這發生在7然後我可以理解它，只是讓它滑動，但事實上它在9，意味着我需要解決這個問題。

感謝大家提前。

卡梅倫

Answer 1

問題可以通過在CSS中:hover僞類和jQuery的的onmouseover和onmouseout事件之間的衝突引起的。我想我已經找到了解決的背景下失去了過濾器，當你將鼠標懸停在綠色的勾，但：

JSFiddle

出現在IE9和Chrome的工作依然。 JSFiddle在Firefox中不起作用，但我認爲這是由於其他原因。

我基本上改組了jQuery onmouseover和onmouseout事件到事件hover()（I懷疑這取得的差），並評論指出，在.grayscale類設置opacity屬性的行。

看看IE9，讓我知道你的想法。

$(document).ready(function() { 

    $(".inspire-me").hover(function() { 
     $(this).addClass("on"); 
    // $(this).find('.grayscale').css('opacity', '0.50'); 
     $(this).find('.content-lower').css('opacity', '1'); 
     var margin = $(this).find('.grayscale').height()/2; 
     var half = margin - 17; 
     $(this).find('.hide').css('visibility', 'visible'); 
     $('.hide').css({'top' : half}); 
    } 
    , 
    function() { 
     $(this).removeClass("on"); 
    // $(this).find('.grayscale').css('opacity', '1'); 
     $(this).find('.hide').css('visibility', 'hidden'); 
    }); 

UPDATE

我已經在CSS中指定的filter財產全SVG XML得到了在Firefox這個工作現在：

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 

Updated Fiddle