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

小开

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.

小开

Why not use :hover and specify a different opacity in the hover class?

a:hover {
opacity:0.6
}

小开

No, that's not possible.

If you want to use rgba, you must set each value together. There's no way to only change the alpha.

小开

This is about the simplest way; put this in your css stylesheet:

a:hover { color : #c00; }

done!

小开

最佳答案

This is now possible with custom properties:

.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }


a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }

To understand how this works, see How do I apply opacity to a CSS color variable?

If custom properties are not an option, see the original answer below.

Unfortunately, no, you'll have to specify the red, green and blue values again for each individual class:

a { display: block; position: relative; }


.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }


.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }

You can only use the inherit keyword alone as a value for the property, and even then the use of inherit isn't appropriate here.

小开

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.

小开

You could do various things to avoid having to hard code the numbers if you want to. Some of these methods only work if you use a plain white background as they're really adding white on top rather than reducing opacity. The first one should work fine for everything provided:

you aren't already using the psuedo-element for something; and
you can set position to relative or absolute on the <div> tag

Option 1: `::before` psuedo-element:

.before_method{
position:relative;
}
.before_method:before{
display:block;
content:" ";
position:absolute;
z-index:-1;
background:rgb(18, 176, 41);
top:0;
left:0;
right:0;
bottom:0;
opacity:0.5;
}
.before_method:hover:before{
opacity:1;
}

Option 2: white gif overlay:

.image_method{
background-color: rgb(118, 76, 41);
background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
background-image:none;
}

Option 3: `box-shadow` method:

A variation of the gif method, but may have performance issues.

.shadow_method{
background-color: rgb(18, 176, 41);
box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{
box-shadow:none;
}

CodePen examples: http://codepen.io/chrisboon27/pen/ACdka

小开

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)

小开

I faced a similar problem. Here's what I did and it works fine( only alpha changes on hover and also the text is not affected) by the following steps:

1) Apply a highlighted(or any of your choice) class to whichever element you wish to change background alpha of.

2) Get the background color rgba

3) Store it in a string and manipulate it(change alpha) as you want on hover(mouseenter and mouseleave)

HTML Code:

<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>

CSS Code:

.brown {background-color: rgba(118,76,41,.8);}
.green {background-color: rgba(51,91,11,.8);}

Javascript Code:

$(document).on({


mouseenter: function() {


var rgba_str = $(this).css("background-color");
var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)";


$(this).css("background-color",new_rgba_str );
},


mouseleave: function(){


var rgba_str = $(this).css("background-color");


var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)";
$(this).css("background-color",new_rgba_str );


}


},'.highlighted');

Working Fiddle:http://jsfiddle.net/HGHT6/1/

小开

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.

小开

there is an alternative,you can add a linear-gradient background image onto the original color.

a{
background: green
}
a:hover{
background-image:linear-gradient(hsla(0,0%,0%,.2) 100%,transparent 100%) // darker
}
a:hover{
background-image:linear-gradient(hsla(255,100%,100%,.2) 100%,transparent 100%) // lighter
}

also, with css3 filter property,you can do that too,but it seems that it will change the text color

a:hover{
filter: brightness(80%) //darker
}
a:hover{
filter: brightness(120%) //lighter
}

here is a jsfiddle:https://jsfiddle.net/zhangyu911013/epwyL296/2/

小开

It's now 2017 and this is now possible with

CSS custom properties / CSS Variables (Caniuse)

One classic use case for CSS variables is the ability to individualize parts of a property's value.

So here, instead of repeating the whole rgba expression once again - we split up or 'individulaize' the rgba values into 2 parts / variables (one for the rgb value and one for the alpha)

.brown {
--rgb: 118, 76, 41;
}
.green {
--rgb: 51, 91, 11;
}
.brown, .green {
--alpha: 0.3;
background-color: rgba(var(--rgb), var(--alpha));
}

Then, on hover we can now just modify the --alpha variable:

a:hover .green, a:hover .brown {
--alpha: 1;
}

a {
display: block;
position: relative;
}
.brown {
--rgb: 118, 76, 41;
}
.green {
--rgb: 51, 91, 11;
}
.brown, .green {
display: inline-block;
--alpha: 0.3;
background-color: rgba(var(--rgb), var(--alpha));
font-size: 40px;
margin: 20px;
}


a:hover .green, a:hover .brown {
--alpha: 1;
}

<a href="#">
<div class="brown">Link 1</div>
</a>
<a href="#">
<div class="green">Link 2</div>
</a>

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

Option 1: `::before` psuedo-element:

Option 2: white gif overlay:

Option 3: `box-shadow` method:

CSS custom properties / CSS Variables (Caniuse)

Codepen

Further reading:

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

Option 1: ::before psuedo-element:

Option 2: white gif overlay:

Option 3: box-shadow method:

CSS custom properties / CSS Variables (Caniuse)

Codepen

Further reading:

Option 1: `::before` psuedo-element:

Option 3: `box-shadow` method: