Frage Ist es möglich, nur das Alpha einer rgba Hintergrundfarbe beim Hover zu ändern?


Ich habe eine Reihe von <a> Tags mit unterschiedlichen rgba-Hintergrundfarben aber demselben Alpha. Ist es möglich, einen einzelnen CSS-Stil zu schreiben, der nur die Deckkraft des rgba-Attributs ändert?

Ein schnelles Beispiel für den Code:

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

Und die Stile

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

Was ich tun möchte, ist einen einzelnen Stil zu schreiben, der die Deckkraft ändern würde, wenn der <a> schwebt über, behält aber die Farbe unverändert.

Etwas wie

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

76
2017-08-05 20:45


Ursprung


Antworten:


Dies ist jetzt mit benutzerdefinierten Eigenschaften möglich:

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

Um zu verstehen, wie das funktioniert, siehe Wie wende ich die Opazität auf eine CSS-Farbvariable an?

Wenn benutzerdefinierte Eigenschaften keine Option sind, finden Sie die ursprüngliche Antwort unten.


Leider müssen Sie die roten, grünen und blauen Werte für jede einzelne Klasse erneut angeben:

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

Sie können nur die inherit Schlüsselwort allein als Wert für die Eigenschaft, und selbst dann die Verwendung von inherit ist hier nicht angebracht.


36
2017-08-05 20:52



Nein, es ist nicht möglich.

Du könntest es versuchen CSS-Vorprozessorwenn du so etwas tun willst.

Von dem, was ich zumindest sehen konnte WENIGER und Sass haben Funktionen, die Farben mehr oder weniger transparent machen können.


12
2017-08-05 21:03



Sie können verschiedene Dinge tun, um zu vermeiden, dass Sie die Zahlen hart codieren müssen, wenn Sie möchten. Einige dieser Methoden funktionieren nur, wenn Sie einen einfachen weißen Hintergrund verwenden, da sie oben tatsächlich Weiß hinzufügen, anstatt die Deckkraft zu reduzieren. Der erste sollte für alles, was zur Verfügung gestellt wird, funktionieren:

  • Sie verwenden das Pseudo-Element nicht bereits für etwas; und
  • Sie können einstellen position zu relativ oder absolut auf der <div> Etikett

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: 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 Methode:

Eine Variante der gif-Methode, kann jedoch Leistungsprobleme haben.

.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-Beispiele: http://codepen.io/chrisboon27/pen/ACdka


10
2018-06-04 05:05



Nein, das ist nicht möglich.

Wenn Sie verwenden möchten rgba, müssen Sie jeden Wert zusammen setzen. Es gibt keine Möglichkeit, nur das Alpha zu ändern.


5
2017-08-05 20:52



Es ist jetzt 2017 und das ist jetzt möglich mit

Benutzerdefinierte CSS-Eigenschaften / CSS-Variablen (Kann ich benutzen)

Ein klassischer Anwendungsfall für CSS-Variablen ist die Möglichkeit, Teile des Werts einer Eigenschaft zu individualisieren.

Also hier, anstatt den ganzen rgba-Ausdruck noch einmal zu wiederholen - wir teilen oder individualisieren das rgba Werte in 2 Teile / Variablen (eine für den rgb-Wert und eine für das Alpha)

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

Dann können wir beim Hover die Variable --alpha einfach ändern:

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

Weiterführende Literatur:

Individualisierung von CSS-Eigenschaften mit CSS-Variablen (Dan Wilson)


5
2017-08-02 14:25



Warum nicht benutzen? :hover und eine andere Deckkraft in der Hover-Klasse angeben?

a:hover {
     opacity:0.6
}

2
2017-08-05 20:51



Ich hatte ein ähnliches Problem. Ich hatte 18 verschiedene Divs, die als Knöpfe arbeiteten und jede mit einer anderen Farbe. Anstatt die Farbcodes für jeden auszuprobieren oder einen div: hover-Selektor zu verwenden, um die Deckkraft zu ändern (was alle untergeordneten Elemente betrifft), habe ich die Pseudo-Klasse verwendet: vorher wie in @Chris Boons Antwort.

Da ich die Farbgebung an den einzelnen Elementen vornehmen wollte, habe ich: vorher ein transparentes weißes div auf: hover erstellt. Dies ist eine sehr einfache Auswaschung.

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

Laut CanIUse.com sollte dies Anfang 2014 etwa 92% betragen. (http://caniuse.com/#feat=css-gencontent)


2
2018-01-31 17:09