Is it possible to change only the alpha of a rgba background colour on hover?

Question

I have a set of tags with differing rgba background colours but the same alpha. Is it possible to write a single css style that will change only the o

Answer 1

No, it's not possible.

You could try a CSS pre-processor, though, if you want to do this sort of thing.

From what I could see, at least LESS and Sass have functions that can make colors more, or less, transparent.

Answer 2

Simple workaround with opacity if you can accommodate a slight change in background-color:

.yourClass {
    // Your style here //
    opacity: 0.9;
}

.yourClass:hover, .yourClass:focus {
    opacity: 0.7;
}

.yourClass:active {
    opacity: 1;
    box-shadow: none;
}

.yourClass:hover, .yourClass:focus, .yourClass:active {
    text-decoration: none;
    outline: none;
}

Answer 3

Update: It's not possible to do that unfortunately. You'll need to write two separate selectors of:

a.green:hover {background-color: rgba(118,76,41,1);}
a.brown:hover {background-color: rgba(118,76,41,1);}

According to the W3C, the rgba property doesn't have/support the inherit value.

Answer 4

You can do this with CSS variables, although it's a little messy.

First, set a variable containing just the RGB values, in order, of the color you want to use:

:root {
  --color-success-rgb: 80, 184, 60; 
}

Then you can assign an RGBA value for a color and pull everything but the alpha value from this variable:

.button--success {
  background: rgba(var(--color-success-rgb), 0.8);
}

This isn't super pretty, but it lets you use the same RGB values but different alpha values for a color.

Answer 5

simple solution :

a
{
    position: relative;
    display:inline-block;
    background: rgba(red, 0.75);
    padding: 20px;


   &:before
   {
     content: ' ';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }

   &:hover
   {
     &:before
     {
       background-color: rgba(#000, 0.25); 
     }
   }
}

exemple : https://jsfiddle.net/epwyL296/14/

just play with alpha of background. if you want light instead of darkness, just replace #000 by #fff

Answer 6

I had a similar problem. I had 18 different divs working as buttons, and each with a different color. Rather than figure out the color codes for each or use a div:hover selector to change the opacity (which affects all children) I used the pseudo-class :before like in @Chris Boon's answer.

Because I wanted to do the coloring on the individual elements, I used :before to create a transparent white div on :hover. This is a very basic washout.

#categories div {
    position:relative;
    width:100px;
    height:100px;
    float:left;
    border:1px solid black;
    display:table-cell;
}

#categories div:before{
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
}

#categories div:hover:before {
    background-color:white;
    opacity:0.2;
}

#a_Particular_Div {
    background-color:red;
}

According to CanIUse.com, this should have something like 92% support as of early 2014. (http://caniuse.com/#feat=css-gencontent)