0

ロールオーバーが必要な画像を含むナビゲーションバーがありますが、それらは透明なpngです。背景はテクスチャー加工されているので、透明なpngは必須です。これは私がしました：

       $('.fade').each(function() {  
        var std = $(this).attr("src");
        var hover = std.replace(".png", "_over.png");
        $(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
            position:'absolute'
        });
        $(this).mouseenter(function() {
            $(this).stop().fadeTo(600, 0);
        }).mouseleave(function() {
            $(this).stop().fadeTo(600, 1);
        });
    });

ここに解決策として投稿されたもの： javascript/jQueryを使用したフェージングイメージスワップのより良い実装

それは機能しますが、問題は、メイン画像の背後にあると想定されているため、ページの読み込み時に「フェードトゥ」png（単なるドロップシャドウ）が表示されることです：http： //jsfiddle.net/qykwV/

'_over.png'画像を最初の画像の後ろに置くのではなく、非表示にすることはできますか？

4

1 に答える 1

0

わかりましたこれでうまくいきました-画像は透明なので、「オーバー」画像を上に配置して非表示にしました。これを行うには、html src 属性をオーバー イメージに変更し、スクリプトに次のような非「オーバー」イメージを作成させました。

       $('.fade').each(function() {  
        var std = $(this).attr("src");
        var hover = std.replace("_over.png", ".png");
        $(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
            position: 'absolute',
            opacity: '0'
        });
        $(this).mouseenter(function() {
            $(this).stop().fadeTo(600, 1);
        }).mouseleave(function() {

            $(this).stop().fadeTo(600, 0);
        });
    });
于 2012-11-06T00:57:22.007 に答える