Changing background color opacity on mouseover

Question

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.

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.

I could opacity: 0.3, etc, but that effects the whole DIV, and I just want to affect the background colour.

Answer 1

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.

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 onmouseover event to change the opacity of the bgColor:

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

Answer 2

You can make the background part of a different div and set the opacity of THAT div, i.e.

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

Answer 3

There a difference between the Alpha value in RGBa and Opacity. Opacity affects all child elements, Alpha does not.

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.

Answer 4

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.

Answer 5

No, you can't edit only the alpha of rgba. So you should use the RGB part of the RGBa.

Answer 6

If you want a separate background colour from the container you may want to use :before or :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 :before is effected and not the contents.