Question

我在IE9中遇到鼠标悬停状态的一些问题，并希望有人可以帮助我。

这个元素会有各种尺寸，所以我不愿意使用背景图片精灵。

我的问题是，当我将鼠标悬停在项目上时，图像变为灰色，但是当我将鼠标悬停在中间的刻度线上时，灰度效果会丢失，因为我猜IE9认为我不再在项目上徘徊，当我的时候。

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

我在jquery上用鼠标做过例，它在IE9中工作，所以我猜我做的事情有点愚蠢。

它适用于所有其他浏览器，包括ie8和ie7，如果这发生在7中，那么我可以理解它并简单地让它滑动，但事实上它在9中，意味着我需要解决这个问题。

提前感谢所有人。

卡梅伦

Answer 1

问题可能是由CSS中的:hover伪类与jQuery中的onmouseover和onmouseout事件之间的冲突引起的。我认为当你将鼠标悬停在绿色勾号上时，我已经找到了丢失过滤器背景的解决方案：

<强> 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');
    });

<强>更新

我现在通过在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

Mouseover Grayscale在IE9中不起作用

1 个答案: