È possibile modificare solo l'alfa di un colore di sfondo rgba al passaggio del mouse?

Ho una serie di <a>tag con diversi colori di sfondo rgba ma lo stesso alfa. È possibile scrivere un unico stile CSS che cambierà solo l'opacità dell'attributo rgba?

Un rapido esempio del codice:

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

E gli stili

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

Quello che vorrei fare è scrivere un unico stile che modifichi l'opacità quando si <a>passa con il mouse sopra, mantenendo il colore invariato.

Qualcosa di simile a

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

Ora è possibile con le proprietà personalizzate:

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

Per capire come funziona, vedi Come si applica l'opacità a una variabile di colore CSS?

Se le proprietà personalizzate non sono un'opzione, vedere la risposta originale di seguito.

Purtroppo no, dovrai specificare nuovamente i valori di rosso, verde e blu per ogni singola classe:

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

È possibile utilizzare solo la inheritparola chiave da sola come valore per la proprietà e anche in questo caso l'uso di inheritnon è appropriato.

Potresti fare varie cose per evitare di dover codificare i numeri se lo desideri. Alcuni di questi metodi funzionano solo se si utilizza uno sfondo bianco semplice poiché in realtà aggiungono bianco in cima anziché ridurre l'opacità. Il primo dovrebbe funzionare bene per tutto ciò che viene fornito:

• non stai già usando l'elemento psuedo per qualcosa; e
• puoi impostare positionsu relativo o assoluto nel <div>tag

Opzione 1: ::beforepsuedo-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;
}

Opzione 2: sovrapposizione gif bianca:

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

Opzione 3: box-shadowmetodo:

Una variazione del metodo gif, ma potrebbe avere problemi di prestazioni.

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

Esempi di CodePen: http://codepen.io/chrisboon27/pen/ACdka

No, non è possibile.

Potresti provare un pre-processore CSS , però, se vuoi fare questo genere di cose.

Da quello che ho potuto vedere, almeno LESS e Sass hanno funzioni che possono rendere i colori più o meno trasparenti.

No, non è possibile.

Se si desidera utilizzare rgba, è necessario impostare ogni valore insieme. Non c'è modo di cambiare solo l'alfa.

Ora è il 2017 e questo è ora possibile con

Proprietà personalizzate CSS / Variabili CSS ( Caniuse )

Un classico caso d'uso per le variabili CSS è la capacità di individuare parti del valore di una proprietà.

Quindi qui, invece di ripetere l'intera espressione rgba ancora una volta, suddividiamo o "individuiamo" i rgbavalori in 2 parti / variabili (una per il valore rgb e una per l'alfa)

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

Quindi, al passaggio del mouse ora possiamo semplicemente modificare la variabile --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

Ulteriore lettura:

Individuazione delle proprietà CSS con variabili CSS (Dan Wilson)

c'è un'alternativa, puoi aggiungere un'immagine di sfondo a gradiente lineare sul colore originale.

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
}

inoltre, con la proprietà del filtro css3, puoi farlo anche tu, ma sembra che cambierà il colore del testo

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

ecco un jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

soluzione semplice:

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

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

basta giocare con alfa di sfondo. se vuoi la luce invece dell'oscurità, sostituisci # 000 con #fff

Perché non utilizzare :hovere specificare un'opacità diversa nella classe hover?

a:hover {
     opacity:0.6
}

Ho avuto un problema simile. Avevo 18 div diversi che funzionavano come pulsanti e ciascuno con un colore diverso. Piuttosto che capire i codici colore per ciascuno o usare un div: hover selector per cambiare l'opacità (che interessa tutti i bambini) ho usato la pseudo-classe: prima come nella risposta di @Chris Boon.

Poiché volevo colorare i singoli elementi, ho usato: before per creare un div bianco trasparente su: hover. Questo è un lavaggio molto semplice.

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

Secondo CanIUse.com, questo dovrebbe avere qualcosa come il 92% di supporto all'inizio del 2014. ( http://caniuse.com/#feat=css-gencontent )

Puoi farlo con le variabili CSS, anche se è un po 'disordinato.

Innanzitutto, imposta una variabile contenente solo i valori RGB, in ordine, del colore che desideri utilizzare:

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

Quindi puoi assegnare un valore RGBA per un colore e tirare tutto tranne il valore alfa da questa variabile:

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

Questo non è molto carino, ma ti consente di utilizzare gli stessi valori RGB ma diversi valori alfa per un colore.

Aggiornamento: sfortunatamente non è possibile farlo. Dovrai scrivere due selettori separati di:

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

Secondo il W3C, la rgbaproprietà non ha / supporta il inheritvalore.

Ho affrontato un problema simile. Ecco cosa ho fatto e funziona bene (only alpha changes on hover and also the text is not affected ) con i seguenti passaggi:

1) Applica una classe evidenziata (oa tua scelta) a qualsiasi elemento di cui desideri modificare l'alfa di sfondo.

2) Ottieni il colore di sfondo rgba

3) Memorizzalo in una stringa e manipolalo (cambia alpha) come vuoi al passaggio del mouse (mouseenter e mouseleave)

Codice HTML:

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

Codice CSS:

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

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

Violino funzionante: http://jsfiddle.net/HGHT6/1/

Soluzione semplice con opacityse puoi accogliere un leggero cambiamento 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;
}

Questo è il modo più semplice; mettilo nel tuo foglio di stile CSS:

a:hover { color : #c00; } 

fatto!