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中是＃delPic。我将div＃editBar的不透明度更改为0.5，但它也适用于#delPic。所以，我想将＃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内，当您对元素应用不透明度更改时，它也会影响其中的所有元素。

Jquery不透明度改变

3 个答案: