Mouseover Grayscale не работает в IE9

Question

У меня возникли проблемы с состоянием mouseover в IE9, и я надеялся, что кто-то сможет мне помочь.

Этот элемент будет иметь различные размеры и поэтому я не хочу использовать спрайт фонового изображения.

Моя проблема в том, что когда я нахожусь на предмете, изображение становится серым, однако, когда я нахожусь на отметке посередине, эффект серой шкалы теряется, поскольку я предполагаю, что IE9 считает, что я больше не паря на предмет , когда я.

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

Я играл примерно с помощью мыши над например, на JQuery, и он работает в IE9, так что я guesing я делаю что-то немного глупой.

Он работает во всех других браузерах, включая ie8 и ie7, если это произошло в 7, тогда я мог бы это понять и просто позволить ему сползать, однако тот факт, что его в 9, означает, что мне нужно обратиться к этому.

Спасибо всем заранее.

Cameron

Answer 1

Проблема может быть вызвана конфликтом между классом :hover псевдо в CSS и onmouseover и onmouseout событий в JQuery. Я думаю, что я нашел решение фоне потери фильтра при наведении курсора мыши на зеленую галочку, хотя:

JSFiddle

Появляется работать в IE9 и Chrome до сих пор. JSFiddle не работает в Firefox, но я думаю, что это связано с другими причинами.

Я в основном перестроил JQuery onmouseover и onmouseout события в hover() события (я сомневаюсь, что это сделало разницу) и закомментировать строки, которые устанавливают opacity свойства в .grayscale классе.

Посмотрите в 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

Я получил эту работу в Firefox сейчас, указав полный SVG XML в filter собственности в CSS:

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