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

Habe ich eine Reihe von <a> tags mit unterschiedlichen rgba-hintergrund-Farben, aber den gleichen alpha. Ist es möglich, zu schreiben, eine einzige css-style, dass wird sich ändern, nur die Deckkraft der rgba-Attribut?

Ein kurzes 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 schreiben eine einzelne Art, die zu einer Veränderung der Opazität, wenn die <a> ist schwebte über, aber halten Sie die Farbe unverändert.

Etwas wie

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}
Kommentar zu dem Problem
By the way, was sind Ihre div - Elemente in Ihrer a - Elemente? Kommentarautor: BoltClock♦
@BoltClock HTML5 ermöglicht block-level a - Elemente. Kommentarautor: mercator
@mercator: Okay. Ich Folge verpasst. Kommentarautor: BoltClock♦
@BoltClock schien Es der einfachste Weg, um code für die Wirkung, ein einzelnes a - tag, da-im Gegensatz zu einem um die img und anderen rund um den text. Die Tatsache, dass es unterstützt HTML-5 ist ein schöner bonus. Kommentarautor: Fireflight
Wenn diese Frage gestellt wurde - dies war nicht möglich mit CSS. Nun ist diese ist möglich - mit CSS-Variablen - wie ich gezeigt habe, in meine Antwort Kommentarautor: Danield

InformationsquelleAutor der Frage Fireflight | 2011-08-05

  1. 36

    Dies ist nun möglich mit benutzerdefinierten Eigenschaften:

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

    Verstehen, wie das funktioniert, sehen Wie kann ich die anwenden der Deckkraft auf eine CSS-Farbe-variable?

    Wenn benutzerdefinierte Eigenschaften sind nicht eine option, sehen Sie den ursprünglichen Antwort unten.

    Leider Nein, hier geben die rot -, grün-und blau-Werte wieder für jede einzelne Klasse:

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

    Kann man nur den inherit keyword alleine als Wert für die Eigenschaft, und selbst dann ist die Verwendung von inherit nicht angemessen ist, hier.

    InformationsquelleAutor der Antwort BoltClock

  2. 12

    Nein, es ist nicht möglich.

    Könnten Sie versuchen, einen CSS-pre-processor, obwohl, wenn Sie wollen, das zu tun diese Art der Sache.

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

    InformationsquelleAutor der Antwort mercator

  3. 10

    Könnten Sie tun, verschiedene Dinge zu vermeiden, codieren Sie die zahlen, wenn Sie wollen. Einige dieser Methoden funktionieren nur, wenn Sie mit einem einfachen weißen hintergrund, wie Sie wirklich sind hinzufügen von weiß auf der Oberseite, anstatt die Verminderung der Deckkraft. Die erste sollte funktionieren für alles gesorgt:

    • Sie nicht bereits mit dem Pseudo-element für etwas; und
    • Sie können position zu relativen oder absoluten auf die <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: weiß 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 des gif-Methode, kann aber performance-Probleme.

    .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

    InformationsquelleAutor der Antwort Chris Boon

  4. 5

    Nein, das ist nicht möglich.

    Wenn Sie verwenden möchten rgba, müssen Sie für jeden Wert zusammen. Gibt es keine Möglichkeit, ändern Sie nur die alpha.

    InformationsquelleAutor der Antwort thirtydot

  5. 2

    Warum nicht :hover und geben Sie eine andere Deckkraft die hover-Klasse?

    a:hover {
     opacity:0.6
}

    InformationsquelleAutor der Antwort Diodeus - James MacFarlane

  6. 2

    Ich hatte ein ähnliches problem. Ich hatte 18 verschiedene divs arbeiten, wie Tasten, und die jeweils mit einer anderen Farbe. Anstatt herauszufinden, die Farbcodes für die einzelnen oder verwenden Sie ein div:hover-Selektor, um die Deckkraft ändern (wirkt sich auf alle Kinder), habe ich die pseudo-Klasse :vor wie in @Chris Boon ' s Antwort.

    Weil ich wollte, zu tun, die Färbung auf die einzelnen Elemente, die ich verwendet habe :vor dem erstellen eines transparenten weiß auf div :hover. Dies ist ein sehr einfaches auswaschen.

    #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 dies sollte so etwas wie 92% Unterstützung ab Anfang 2014. (http://caniuse.com/#feat=css-gencontent)

    InformationsquelleAutor der Antwort Josiah

  7. 1

    Update: Es ist nicht möglich, leider. Sie schreiben müssen, zwei getrennte Selektoren:

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

    Nach den Standards des W3C, die rgba Eigenschaft nicht haben/unterstützen inherit Wert.

    InformationsquelleAutor der Antwort jezza-tan

  8. 1

    Stand ich vor einem ähnlichen problem. Hier ist, was ich Tat, und es funktioniert gut( only alpha changes on hover and also the text is not affected) durch die folgenden Schritte:

    1) tragen Sie einen markierten(oder eines Ihrer Wahl) - Klasse, um welches element Sie ändern möchten, hintergrund-alpha-Wert von.

    2) Holen Sie sich die Hintergrundfarbe rgba

    3) Speichern Sie es in eine Zeichenfolge und Sie zu manipulieren(ändern, alpha), die Sie auf hover(mouseenter und 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');

    Arbeiten Fiddle:http://jsfiddle.net/HGHT6/1/

    InformationsquelleAutor der Antwort Rakhi

  9. 1

    Können Sie dies mit CSS-Variablen, obwohl es ein wenig chaotisch.

    Legen Sie zuerst eine variable mit nur die RGB-Werte, um die Farbe, die Sie verwenden möchten:

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

    Dann können Sie zuweisen, ein RGBA-Wert für eine Farbe, und ziehen Sie alles, aber den alpha-Wert dieser variable:

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

    Dies ist nicht super schön, aber Sie können die gleichen RGB-Werte, aber unterschiedliche alpha-Werte für eine Farbe.

    InformationsquelleAutor der Antwort Adam Hollett

  10. 1

    gibt es eine alternative,Sie können eine linear-gradient hintergrund-Bild auf die ursprüngliche Farbe.

    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
}

    auch mit der css3-Eigenschaft filter,können Sie das auch tun,aber es scheint, dass es wird sich ändern die Farbe des Textes

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

    hier ein jsfiddle:https://jsfiddle.net/zhangyu911013/epwyL296/2/

    InformationsquelleAutor der Antwort Yu Zhang

  11. 0

    einfache Lösung :

    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/

    spielen nur mit alpha-hintergrund. wenn Sie möchten, Licht statt Dunkelheit, nur ersetzen Sie #000 auf #fff

    InformationsquelleAutor der Antwort Matrix

  12. -4

    Dies ist wohl der einfachste Weg; setzen Sie diese in Ihrer css-stylesheet:

    a:hover { color : #c00; }

    getan!

    InformationsquelleAutor der Antwort dr. null

Schreibe einen Kommentar