Jquery不透明度更改

2o7dmzc5 于 2023-03-17 发布在 jQuery

关注(0)|答案(3)|浏览(167)

我有这个代码：

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

jquery

来源：https://stackoverflow.com/questions/1543745/jquery-opacity-change

3条答案

按热度按时间

eeq64g8w1#

不透明度将被应用到所有的元素里面，你不能改变这个行为。但是你可以做一个小技巧：

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

）;

赞(0）回复(0）举报 2023-03-17

epfja78i2#

你不能这样做。在一个元素上设置不透明度会使它里面的所有东西都遵循这个规则。一个解决方案（还没有广泛实现）是使用rgba(r,g,b,o)，它只为那个元素设置不透明度。
另一个解决方案是创建一个黑色的1px png 8（IE6也支持）或50%不透明的gif，将其设置为父元素的背景图像，就可以开始了。

赞(0）回复(0）举报 2023-03-17

t98cgbkg3#

这是因为a标签在div中，当你对一个元素应用不透明度改变时，它也会影响其中的所有元素。

赞(0）回复(0）举报 2023-03-17