2

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

这个元素将有各种大小，这就是为什么我不愿意使用背景图像精灵。

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

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

我在 jquery 上玩过鼠标悬停的例子，它在 IE9 中工作，所以我猜我在做一些有点愚蠢的事情。

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

提前感谢大家。

卡梅伦

4

1 回答 1

0

该问题可能是由:hoverCSS 中的伪类与jQuery 中的onmouseoverand事件之间的冲突引起的。onmouseout我想我已经找到了解决当您将鼠标悬停在绿色刻度上时背景丢失过滤器的方法：

JSFiddle

似乎仍然可以在 IE9 和 Chrome 中使用。JSFiddle 在 Firefox 中不起作用，但我认为这是由于其他原因。

onmouseover我基本上将 jQuery和事件重组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');
    });

更新

filter通过在 CSS的属性中指定完整的 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");

更新小提琴

于 2013-04-05T12:02:10.087 回答