jquery - jQuery不透明度更改

Question

我有这个代码：

$('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 放入锚点（试图直接选择它），但仍然不起作用。

Answer 1

不透明度将应用于内部的所有元素，您无法更改此行为。但是你可以做一个小技巧：

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

);

Answer 2

你不能。在元素上设置不透明度会使其中的所有内容都遵循该规则。一种解决方案（尚未广泛实施）是使用rgba(r,g,b,o)它将单独为该元素设置不透明度。

另一种解决方案是创建一个黑色的 1px png 8（IE6 也支持）或 50% 不透明的 gif。将此设置为父元素的背景图像，一切顺利。

Answer 3

因为 a 标签在 div 中，所以当您对元素应用不透明度更改时，它也会影响其中的所有元素。