É possível alterar apenas o alfa de uma cor de fundo rgba ao pairar?

Eu tenho um conjunto de <a>tags com cores de fundo rgba diferentes, mas o mesmo alfa. É possível escrever um único estilo css que alterará apenas a opacidade do atributo rgba?

Um exemplo rápido do código:

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

E os estilos

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

O que eu gostaria de fazer é escrever um único estilo que mudaria a opacidade quando o <a>é pairado sobre ele, mas manteria a cor inalterada.

Algo como

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

Isso agora é possível com propriedades personalizadas:

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

Para entender como isso funciona, consulte Como aplico opacidade a uma variável de cor CSS?

Se as propriedades personalizadas não forem uma opção, consulte a resposta original abaixo.

Infelizmente, não, você terá que especificar os valores de vermelho, verde e azul novamente para cada classe individual:

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

Você só pode usar a inheritpalavra - chave sozinha como um valor para a propriedade e, mesmo assim, o uso de inheritnão é apropriado aqui.

Você pode fazer várias coisas para evitar ter que codificar os números se quiser. Alguns desses métodos funcionam apenas se você usar um plano de fundo branco simples, pois eles realmente adicionam branco no topo em vez de reduzir a opacidade. O primeiro deve funcionar bem para tudo fornecido:

• você ainda não está usando o elemento psuedo para algo; e
• você pode definir positioncomo relativo ou absoluto na <div>tag

Opção 1: ::beforeelemento psuedo:

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

Opção 2: sobreposição de gif branco:

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

Opção 3: box-shadowmétodo:

Uma variação do método GIF, mas pode ter problemas de desempenho.

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

Exemplos de CodePen: http://codepen.io/chrisboon27/pen/ACdka

Não, não é possível.

Você pode tentar um pré-processador CSS , no entanto, se quiser fazer esse tipo de coisa.

Pelo que pude ver, pelo menos LESS e Sass têm funções que podem tornar as cores mais ou menos transparentes.

Não, isso não é possível.

Se você deseja usar rgba, deve definir cada valor juntos. Não há como mudar apenas o alfa.

Agora é 2017 e isso agora é possível com

Propriedades personalizadas CSS / Variáveis ​​CSS ( Caniuse )

Um caso de uso clássico para variáveis ​​CSS é a capacidade de individualizar partes do valor de uma propriedade.

Então aqui, em vez de repetir toda a expressão rgba mais uma vez - nós dividimos ou 'individualizamos' os rgbavalores em 2 partes / variáveis ​​(uma para o valor rgb e outra para o alfa)

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

Então, ao passar o mouse, podemos agora apenas modificar a variável --alpha:

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

Leitura adicional:

Individualizando propriedades CSS com variáveis ​​CSS (Dan Wilson)

existe uma alternativa, você pode adicionar uma imagem de fundo gradiente linear na cor original.

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
}

também, com a propriedade de filtro css3, você pode fazer isso também, mas parece que mudará a cor do texto

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

aqui está um jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

solução simples:

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/

apenas brinque com alfa de fundo. se você quiser luz em vez de escuridão, basta substituir # 000 por #fff

Por que não usar :hovere especificar uma opacidade diferente na classe de foco?

a:hover {
     opacity:0.6
}

Eu tive um problema parecido. Eu tinha 18 divs diferentes trabalhando como botões, e cada um com uma cor diferente. Em vez de descobrir os códigos de cores de cada um ou usar um seletor div: hover para alterar a opacidade (que afeta todos os filhos), usei a pseudo-classe: antes, como na resposta de @Chris Boon.

Como eu queria colorir os elementos individuais, usei: before para criar um div branco transparente em: hover. Este é um washout muito básico.

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

De acordo com CanIUse.com, isso deveria ter algo em torno de 92% de suporte no início de 2014. ( http://caniuse.com/#feat=css-gencontent )

Você pode fazer isso com variáveis ​​CSS, embora seja um pouco confuso.

Primeiro, defina uma variável contendo apenas os valores RGB, na ordem, da cor que deseja usar:

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

Em seguida, você pode atribuir um valor RGBA para uma cor e extrair tudo, exceto o valor alfa desta variável:

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

Isso não é muito bonito, mas permite que você use os mesmos valores RGB, mas diferentes valores alfa para uma cor.

Atualização: Infelizmente não é possível fazer isso. Você precisará escrever dois seletores separados de:

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

De acordo com o W3C, a rgbapropriedade não possui / suporta o inheritvalor.

Eu enfrentei um problema semelhante. Aqui está o que eu fiz e funciona bem ( only alpha changes on hover and also the text is not affected) pelas seguintes etapas:

1) Aplique uma classe destacada (ou qualquer de sua escolha) para qualquer elemento que você deseja alterar o alfa de fundo.

2) Obtenha a cor de fundo rgba

3) Armazene-o em uma string e manipule-o (altere o alfa) como quiser ao passar o mouse (entrada do mouse e deixa do mouse)

Código HTML:

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

Código CSS:

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

Código Javascript:

$(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/

Uma solução simples opacityse você pode acomodar uma pequena mudança em 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;
}

Esta é a maneira mais simples; coloque isso em sua folha de estilo css:

a:hover { color : #c00; } 

feito!