鼠标悬停时更改背景颜色透明度

Question

我有一个DIV，我想根据鼠标是否悬停在上面来改变背景颜色的透明度。

我知道你可以使用background: rgba(54, 25, 25, .5)等方法，但我想单独设置颜色。有没有办法只修改透明度而不修改颜色。

我可以使用opacity: 0.3等方法，但这会影响整个DIV，我只想影响背景颜色。

- Chuck Le Butt

Answer 1

HTML/CSS本身没有这个选项，但既然您在JavaScript中访问/设置颜色，那么最好添加自己的函数来处理它。

以下是一个示例：

<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>

然后在HTML中使用onmouseover事件来改变背景颜色的不透明度：

<div onmouseover="setBgOpacity(this, '0.3');"
     onmousout="setBgOpacity(this, '0.5');">Put your mouse over me</div>

- Ozzy

---

解决这个特定问题的好方法。谢谢！ - Chuck Le Butt

只是一个小细节，为了澄清那些混淆了“不透明度”和 RGB “alpha”的人 - 我会将函数从 setBgOpacity 重命名为 setBgAlpha。 - Dave Everitt

Answer 2

您可以将背景部分设置为另一个 div 并设置该 div 的透明度，即:

<div id="container">
    <div id="background"></div>
    <div id="content">
        <p>Lorum ipsum...</p>
    </div>
</div>

和

#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; }

- Jeff

---

#container { overflow:hidden; position:relative; } #容器 { 溢出:隐藏; 位置:相对; } - Vahid

Answer 3

RGBa和Opacity中的Alpha值有所不同。Opacity会影响所有子元素，而Alpha则不会。

您需要读取当前的颜色值，然后将其重新声明为具有新Alpha值的RGBa格式。您可能需要将当前的十六进制颜色值转换为十进制三元组来实现这一点。

- Diodeus - James MacFarlane

---

没有必要每次都重新编辑颜色，直接保留一份副本进行修改即可。请参考我的示例：https://dev59.com/A2PVa4cB1Zd3GeqP4U2l#10388640 - Ozzy

感谢您解释不透明度和RGBa之间的区别。 - Vincent

Answer 4

如果您想要与容器不同的背景颜色，可以使用: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;
    }
}

当你将鼠标悬停在.container上时，只有:before的不透明度受到影响，而不是内容本身。

- Matthew Skinner

Answer 5

如果您依赖RGBA来修改背景颜色的不透明度，那么，没有办法将其与颜色本身分开设置。您必须为正常状态和悬停状态分别声明显式的RGBA值。

- chipcullen

Answer 6

不可以只编辑rgba的alpha通道，因此您需要使用RGBa的RGB部分。

- Wouter J