jQuery的不透明度變化

我有這樣的代碼：jQuery的不透明度變化

$('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放在錨點（試圖直接選擇它），但仍然無法正常工作。

來源

2009-10-09 kmunky

不透明度將應用於所有內部元素，您無法更改此行爲。但你可以做一點小把戲：

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

）;

來源

2009-10-09 13:38:29

你不能。在元素上設置不透明度會使其內的所有內容都遵循該規則。一種解決方案（尚未廣泛實施）是使用rgba(r,g,b,o)，它將單獨爲這一個元素設置不透明度。

另一種解決方案是創建一個黑色1px png 8（也支持在IE6中）或gif，它是50％不透明的。將其設置爲父元素的背景圖像，並且您很好。

來源

2009-10-09 13:31:54 peirix

ouh ...所以我必須改變我的策略..謝謝你的答案球員 – kmunky 2009-10-09 13:34:07

Arent GIF的透明與否？ – dotty 2009-10-09 14:00:53

它是因爲標籤在div內，所以當您將不透明度更改應用到元素時，它也會影響其中的所有元素。

來源

2009-10-09 13:31:55

jQuery的不透明度變化

回答

相關問題