Jquery不透明度改变 [英] Jquery opacity change

问题描述

我有这段代码：

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

So, i append that that pops on mouseover, inside this div is the a#delPic. I changed the opacity of div#editBar to 0.5 but it applies to a#delPic too. So, I want to change back the a#delPic opacity to 1. How can I do this? I tried some versions. That's why I ended up putting that id to the anchor (trying to directly select it), but still doesn't work.

推荐答案

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

Opacity will be applied to all elements inside, you are not able to change this behaviour. But you can do a little trick:

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

）;

这篇关于Jquery不透明度改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！