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

Question

我有一个DIV，我想改变背景颜色的不透明度，这取决于鼠标是否在它上面。

我知道你可以使用background: rgba(54, 25, 25, .5)等，但我想分别设置颜色。 有什么方法我只能修改OPACITY，而不是颜色。

我可能opacity: 0.3等，但这会影响整个DIV，我只是想影响背景颜色。

Answer 1

您可以将背景部分设为不同的div并设置THAT 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; }

Answer 2

没有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事件来更改bgColor的不透明度：

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

Answer 3

RGBa中的Alpha值与不透明度之间存在差异。 不透明度会影响所有子元素，Alpha则不会。

您必须读取当前颜色值，然后使用新的Alpha值将其重新设置为RGBa。 您可能需要将当前十六进制颜色值转换为十进制三元组才能执行此操作。

Answer 4

如果您依靠RGBA来修改背景颜色的不透明度，不能，则无法将颜色本身与颜色分开设置。 您必须为正常状态和悬停状态声明显式RGBA值。

Answer 5

不，你不能只编辑rgba的alpha。 所以你应该使用RGBa的RGB部分。

Answer 6

如果您想要从容器中获得单独的背景颜色，您可能需要使用: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的不透明度而不是内容。