Is it possible to change only alpha background colors of rgba while hovering?

Question

I have a set of <a> tags with different rgba background colors, but the same alpha. Is it possible to write a single css style that only changes the opacity of the rgba attribute?

Quick code example:

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

And styles

 a {display: block; position: relative} .brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);} .green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);} 

I would like to write one style that changes the opacity when <a> hangs, but keep the color unchanged.

Something like

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

Answer 1

Now this is 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 Original answer below.

---

Unfortunately, no, you will have to re-specify the values ​​of red, green and blue 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); } 

Only one inherit keyword can be used as a property value, and even then using inherit is inappropriate here.

Answer 2

No, It is Immpossible.

You can try the CSS preprocessor , though, if you want to do something like this.

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

Answer 3

You can do different things to avoid the need for hard coding of numbers if you want. Some of these methods only work if you use a plain white background, as they really add white color on top, rather than reduce opacity. The first should work well for everything that is provided:

• you are not using the psuedo element for anything yet; as well as
• You can set position absolute or relative to the <div> tag

Option 1: ::before pseudo-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: overlay a white gif:

 .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

Answer 4

No, It is Immpossible.

If you want to use rgba , you must set each value together. There is no way to change alpha.

Answer 5

Now is 2017, and now it is possible with

CSS Custom Properties / CSS Variables ( Caniuse )

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

So here, instead of repeating the whole rgba expression again - we break down or “individualize” 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 simply change 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> 

Codepen

Further reading:

Customizing CSS Properties with CSS Variables (Dan Wilson)

Answer 6

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

 a:hover { opacity:0.6 } 

Answer 7

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

Since I wanted to colorize individual elements, I used: before to create a transparent white div on: hover. This is a very simple wash.

 #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, there should be something like 92% support at the beginning of 2014. ( http://caniuse.com/#feat=css-gencontent )

Answer 8

You can do this with CSS variables, although this is a bit messy.

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

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

Then you can assign an RGBA value to the color and pull everything except the alpha value from this variable:

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

This is not very pretty, but allows you to use the same RGB values, but different alpha values ​​for the color.

Answer 9

Update: This is impossible to do, unfortunately. You will need to write two separate selectors:

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

According to W3C, the rgba property rgba not have / supports the inherit value.

Answer 10

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

1) Apply the selected (or any of yours) class to any element that you want to change as a background.

2) Get rgba background color

3) Store it in a line 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 script: http://jsfiddle.net/HGHT6/1/

Answer 11

There is an alternative, you can add a background image with a linear gradient to 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 the filter css3 property, you can do it too, but it seems like it will change the color of the text

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

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

Answer 12

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

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

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

Answer 13

A simple workaround with opacity if you can adapt to a small 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 14

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

 a:hover { color : #c00; } 

done!