2

IE9 でマウスオーバー状態に問題があり、誰かが私を助けてくれることを望んでいました。

この要素はさまざまなサイズになるため、背景画像のスプライトを使用することに消極的です。

私の問題は、アイテムにカーソルを合わせると画像が灰色になることですが、真ん中の目盛りにカーソルを合わせるとグレースケール効果が失われます. .

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

jqueryでマウスオーバーの例を試してみましたが、IE9で動作するので、少しばかげたことをしていると思います。

ie8 や ie7 を含む他のすべてのブラウザーで動作します。これが 7 で発生した場合は、それを理解して単純にスライドさせることができますが、9 であるという事実は、これに対処する必要があることを意味します。

事前に感謝します。

キャメロン

4

1 に答える 1

0

:hoverこの問題は、CSS の疑似クラスとonmouseoverjQueryonmouseoutのイベントとの競合が原因である可能性があります。ただし、緑色の目盛りにカーソルを合わせると、バックグラウンドがフィルターを失うという解決策を見つけたと思います。

JSFiddle

IE9 と Chrome でも動作するようです。JSFiddle は Firefox では機能しませんが、それは他の理由によるものだと思います。

基本的に、jQueryonmouseoverと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');
    });

アップデート

filterCSSのプロパティに完全な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 に答える