Javascript 更改鼠标悬停时的背景颜色不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10388454/
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
Changing background color opacity on mouseover
提问by Chuck Le Butt
I have a DIV that I'd like to change the background color opacity on, depending on if the mouse is over it or not.
我有一个 DIV，我想根据鼠标是否在它上面来更改背景颜色的不透明度。
I know you can use background: rgba(54, 25, 25, .5)etc, but I want to set the colour separately. Is there any way I can JUST modify the OPACITY, and not the colour.
我知道你可以使用background: rgba(54, 25, 25, .5)等，但我想单独设置颜色。有什么办法可以只修改 OPACITY 而不是颜色。
I could opacity: 0.3, etc, but that effects the whole DIV, and I just want to affect the background colour.
我可以opacity: 0.3，等等，但这会影响整个 DIV，我只想影响背景颜色。
采纳答案by Ozzy
No html/css doesn't have that option built in, but since you're accessing/setting the colour in javascript you might as well add in your own function which can handle that for you.
没有 html/css 没有内置该选项，但是由于您在 javascript 中访问/设置颜色，您不妨添加自己的函数来为您处理。
Here's an example for you:
这是一个例子：
<script type="text/javascript">
function RGBA(red,green,blue,alpha) {
this.red = red;
this.green = green;
this.blue = blue;
this.alpha = alpha;
this.getCSS = function() {
return "rgba("+this.red+","+this.green+","+this.blue+","+this.alpha+")";
}
}
// store a copy of the color
var bgColor = new RGBA(255,0,0,0.5);
function setBgOpacity(elem, opac) {
bgColor.alpha = opac;
elem.style.backgroundColor = bgColor.getCSS();
}
</script>
Then in the HTML use the onmouseoverevent to change the opacity of the bgColor:
然后在 HTML 中使用onmouseover事件来更改 bgColor 的不透明度：
<div onmouseover="setBgOpacity(this, '0.3');"
onmousout="setBgOpacity(this, '0.5');">Put your mouse over me</div>
回答by Jeff
You can make the background part of a different divand set the opacity of THAT div, i.e.
您可以使背景部分不同div并设置 THAT 的不透明度div，即
<div id="container">
<div id="background"></div>
<div id="content">
<p>Lorum ipsum...</p>
</div>
</div>
And
和
#container { overflow:hidden; position:relative; }
#background {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#FF0000;
}
#background:hover { opacity:0.3; }
#content { position:relative; z-index:10; }
回答by Diodeus - James MacFarlane
There a difference between the Alpha value in RGBa and Opacity. Opacity affects all child elements, Alpha does not.
RGBa 中的 Alpha 值和不透明度之间存在差异。不透明度会影响所有子元素，而 Alpha 不会。
You'll have to read the current colour value, then restate it as RGBa with the new Alpha value. You may need to convert the current hex colour value to a decimal triplet to do this.
您必须读取当前颜色值，然后使用新的 Alpha 值将其重新表述为 RGBa。您可能需要将当前的十六进制颜色值转换为十进制三元组才能执行此操作。
回答by chipcullen
If you are relying on RGBA to modify the opacity of the background color, no, there is no way to set that separately from the color itself. You will have to declare explicit RGBA values for both your normal and hover states.
如果您依靠 RGBA 来修改背景颜色的不透明度，不，没有办法将其与颜色本身分开设置。您必须为正常状态和悬停状态声明显式 RGBA 值。
回答by Wouter J
No, you can't edit only the alpha of rgba. So you should use the RGBpart of the RGBa.
不，您不能只编辑 rgba 的 alpha。所以，你应该使用RGB的部分RGBa。
回答by Matthew Skinner
If you want a separate background colour from the container you may want to use :beforeor :after.
如果您想从容器中获得单独的背景颜色，您可能需要使用:before或:after。
.container {
position: relative;
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
opacity: 1;
z-index: -1;
}
&:hover {
&:before {
opacity: 0.5;
}
}
.content {
z-index: 1;
}
}
When you hover on the .container, only the opacity of the :beforeis effected and not the contents.
当您将鼠标悬停在 上时.container，只会影响 的不透明度，:before而不影响内容。
