Изменение прозрачности Jquery - PullRequest
Новая
       21

Изменение прозрачности Jquery

3 голосов
/ 09 октября 2009

У меня есть этот код: 

$('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, но это относится и к # delPic. Итак, я хочу изменить непрозрачность # delPic до 1. Как я могу это сделать? Я попробовал несколько версий. Вот почему я закончил тем, что поместил этот идентификатор в привязку (пытаясь выбрать его напрямую), но все равно не работает.

Ответы [ 3 ]

6 голосов
/ 09 октября 2009

Непрозрачность будет применена ко всем элементам внутри, вы не можете изменить это поведение. Но вы можете сделать маленький трюк: 

$('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 голосов
/ 09 октября 2009

Это потому, что тег находится внутри элемента div, и когда вы применяете изменение непрозрачности к элементу, это также влияет на все элементы внутри него.

0 голосов
/ 09 октября 2009

Вы не можете. Установка непрозрачности на элемент заставляет все внутри него следовать этому правилу. Одним из решений (пока не получивших широкого применения) является использование rgba(r,g,b,o), которое установит непрозрачность только для одного этого элемента.

Другое решение - создать черный 1px png 8 (также поддерживается в IE6) или gif, который на 50% непрозрачен. Установите это как background-image для родительского элемента, и все готово.

...