3

私はこのコードを持っています:

$('a[rel="imagesHandler"]').hover(
    function(){
        //ia latimea
        var liWidth = $(this).width();
        $(this).append('<div id="editBar"><a id="delPic" href="#"><img id ="piDe"src="./images/pic_del_icon.png" alt="" /></a></div>');

        $('div#editBar')
            .css({  'width':liWidth - 3,
                'height':'19px',
                'padding-left':'3px',
                'padding-top':'1px',
                'float':'left',
                'position':'relative',
                'top':'-22px',
                'z-index':200,
                'background-color':'black',
                'opacity':'0.5'
            })
            .hide()
            .fadeIn('slow');

        $('a#delPic').click(function(event){
            event.stopPropagation();
            alert('gigi');
            return false;
        });
    },
    function(){
        $('div#editBar').hide('slow');
        $('div#editBar').remove();
    }
);

したがって、マウスオーバーでポップすることを追加します。この div 内には a#delPic があります。div#editBar の不透明度を 0.5 に変更しましたが、a#delPic にも適用されます。それで、a#delPic の不透明度を 1 に戻したいのですが、どうすればよいですか? いくつかのバージョンを試しました。そのため、その ID をアンカーに配置してしまいましたが (直接選択しようとしました)、それでも機能しません。

4

3 に答える 3

6

不透明度は内部のすべての要素に適用されます。この動作を変更することはできません。しかし、ちょっとしたトリックを行うことができます:

$('a[rel="imagesHandler"]').hover(
function(){
    var liWidth = $(this).width();

    $(this).append('<div id="editBar"><div class="transparent"></div><a id="delPic" href="#"><img id ="piDe"src="./images/pic_del_icon.png" alt="" /></a></div>');

    $('div#editBar .transparent').css({
        'position': 'absolute',
        'left':'0',
        'right':'0',
        'top':'0',
        'bottom':'0',
        'background-color':'black',
        'opacity':'0.5'
    });

    $('div#editBar').css({'width':liWidth - 3,
        'height':'19px',
        'padding-left':'3px',
        'padding-top':'1px',
        'float':'left',
        'position':'relative',
        'top':'-22px',
        'z-index':200
    }).hide().fadeIn('slow');

    $('a#delPic').click(function(event){
    event.stopPropagation();
    alert('gigi');
    return false;
    });
},

function(){
    $('div#editBar').hide('slow');
    $('div#editBar').remove();
}

);

于 2009-10-09T13:38:29.497 に答える
0

できません。要素に不透明度を設定すると、要素内のすべてがそのルールに従います。1 つの解決策 (まだ広く実装されていません) はrgba(r,g,b,o)、その 1 つの要素だけに不透明度を設定する を使用することです。

別の解決策は、黒の 1px png 8 (IE6 でもサポートされています) または 50% 不透明な gif を作成することです。これを親要素の背景画像として設定すれば、準備完了です。

于 2009-10-09T13:31:54.593 に答える
0

タグが div 内にあるため、要素に不透明度の変更を適用すると、その要素内のすべての要素にも影響します。

于 2009-10-09T13:31:55.183 に答える