¿Es posible cambiar solo el alfa de un color de fondo rgba al pasar el mouse?

Tengo un conjunto de <a>etiquetas con diferentes colores de fondo rgba pero con el mismo alfa. ¿Es posible escribir un solo estilo CSS que cambie solo la opacidad del atributo rgba?

Un ejemplo rápido del código:

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

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

Lo que me gustaría hacer es escribir un estilo único que cambie la opacidad cuando se <a>pasa el cursor sobre él, pero que mantenga el color sin cambios.

Algo como

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

Esto ahora es posible con propiedades 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 comprender cómo funciona esto, consulte ¿Cómo aplico opacidad a una variable de color CSS?

Si las propiedades personalizadas no son una opción, consulte la respuesta original a continuación.

Desafortunadamente, no, tendrá que especificar los valores rojo, verde y azul nuevamente para cada clase 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); }

Solo puede usar la inheritpalabra clave sola como valor para la propiedad, e incluso entonces el uso de inheritno es apropiado aquí.

Puede hacer varias cosas para evitar tener que codificar los números si lo desea. Algunos de estos métodos solo funcionan si usa un fondo blanco liso, ya que en realidad agregan blanco en la parte superior en lugar de reducir la opacidad. El primero debería funcionar bien para todo lo proporcionado:

• aún no estás usando el elemento psuedo para algo; y
• se puede establecer positionen relativo o absoluto en la <div>etiqueta

Opción 1: ::beforepsuedo-elemento:

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

Opción 2: superposición de gif blanco:

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

Opción 3: box-shadowmétodo:

Una variación del método gif, pero puede tener problemas de rendimiento.

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

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

No, no es posible.

Sin embargo, podrías probar un preprocesador CSS si quieres hacer este tipo de cosas.

Por lo que pude ver, al menos LESS y Sass tienen funciones que pueden hacer que los colores sean más o menos transparentes.

No, eso no es posible.

Si desea utilizar rgba, debe establecer cada valor juntos. No hay forma de cambiar solo el alfa.

Ahora es 2017 y esto ahora es posible con

Propiedades personalizadas CSS / Variables CSS ( Caniuse )

Un caso de uso clásico de las variables CSS es la capacidad de individualizar partes del valor de una propiedad.

Entonces, aquí, en lugar de repetir toda la expresión rgba una vez más, dividimos o 'individualizamos' los rgbavalores en 2 partes / variables (una para el valor rgb y otra para el alfa)

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

Luego, al pasar el mouse, ahora podemos modificar la variable --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

Otras lecturas:

Individualización de propiedades CSS con variables CSS (Dan Wilson)

hay una alternativa, puede agregar una imagen de fondo de degradado lineal al color 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
}

también, con la propiedad de filtro css3, también puede hacer eso, pero parece que cambiará el color del texto

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

aquí hay un jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

Solución simple :

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

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

solo juega con alfa de fondo. si desea luz en lugar de oscuridad, simplemente reemplace # 000 por #fff

¿Por qué no usar :hovery especificar una opacidad diferente en la clase de desplazamiento?

a:hover {
     opacity:0.6
}

Tuve un problema similar. Tenía 18 divs diferentes trabajando como botones, y cada uno con un color diferente. En lugar de averiguar los códigos de color para cada uno o usar un selector div: hover para cambiar la opacidad (que afecta a todos los niños), usé la pseudo-clase: antes como en la respuesta de @Chris Boon.

Como quería colorear los elementos individuales, usé: before para crear un div blanco transparente en: hover. Este es un lavado muy 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;
}

Según CanIUse.com, esto debería tener un soporte del 92% a principios de 2014. ( http://caniuse.com/#feat=css-gencontent )

Puede hacer esto con variables CSS, aunque es un poco complicado.

Primero, configure una variable que contenga solo los valores RGB, en orden, del color que desea usar:

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

Luego, puede asignar un valor RGBA para un color y extraer todo menos el valor alfa de esta variable:

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

Esto no es muy bonito, pero te permite usar los mismos valores RGB pero diferentes valores alfa para un color.

Actualización: Lamentablemente, no es posible hacer eso. Deberá escribir dos selectores separados de:

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

Según el W3C, la rgbapropiedad no tiene / soporta el inheritvalor.

Enfrenté un problema similar. Esto es lo que hice y funciona bien ( only alpha changes on hover and also the text is not affected) siguiendo los siguientes pasos:

1) Aplique una clase resaltada (o cualquiera de su elección) a cualquier elemento del que desee cambiar el alfa de fondo.

2) Obtenga el color de fondo rgba

3) Guárdelo en una cadena y manipúlelo (cambie alfa) como desee al pasar el mouse (mouseenter y mouseleave)

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

Violín de trabajo: http://jsfiddle.net/HGHT6/1/

Solución alternativa simple opacitysi puede adaptarse a un ligero cambio en 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 es la forma más sencilla; pon esto en tu hoja de estilo CSS:

a:hover { color : #c00; } 

¡hecho!