Jquery 不透明度变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1543745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery opacity change
提问by kmunky
I have this code:
我有这个代码：
$('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();
}
);
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.
所以，我附加了鼠标悬停时弹出的内容，在这个 div 中是 a#delPic。我将 div#editBar 的不透明度更改为 0.5，但它也适用于 #delPic。所以，我想将 a#delPic 不透明度改回 1。我该怎么做？我尝试了一些版本。这就是为什么我最终将该 id 放在锚点上（尝试直接选择它），但仍然不起作用。
回答by Max S. Yarchevsky
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();
}
);
);
回答by peirix
You can't. Setting opacity on an element makes everything inside it follow that rule. One solution (not widely implemented yet) is to use rgba(r,g,b,o)which will set opacity for that one element alone.
你不能。在元素上设置不透明度会使其中的所有内容都遵循该规则。一种解决方案（尚未广泛实施）是使用rgba(r,g,b,o)which 将单独为该元素设置不透明度。
Another solution is to create a black 1px png 8 (also supported in IE6) or gif that's 50% opaque. Set this as the background-image for the parent element, and you're good to go.
另一种解决方案是创建一个黑色的 1px png 8（在 IE6 中也支持）或 50% 不透明的 gif。将此设置为父元素的背景图像，您就可以开始了。
回答by Wayne Austin
Its because the a tag is within the div, when you apply an opacity change to an element it will affect all elements within it too.
这是因为 a 标签在 div 中，当您对元素应用不透明度更改时，它也会影响其中的所有元素。
