CSS - Verdunkeln bei Hover mit unbekannter Farbe

Question

Ich generiere zufällig Farben in Kästchen von 50x50px und wenn ich sie schwebe, möchte ich, dass sie dunkler werden, aber die gleiche Farbe behalten.

Ich habe versucht Einstellung li:hover auf eine dunkle Farbe mit Transparenz

background-color: rgba(91, 91, 91, 0.51) !important; 

aber es sieht nicht gut aus, es macht die ganze <li> (das ist die Box ich mich beziehe) auf schweben transparent .

Wie erreiche ich das?

Here is a Plunker.

Answer 1

Es ist leider nicht möglich, nur das Alpha zu ändern. Sie müssen die roten, grünen und blauen Werte für jede einzelne Klasse angeben.

Aber es ist eine andere Art und Weise, die hier beantwortet wird, und ich werde weiter unten kopieren: https://stackoverflow.com/a/16910152/1026017

Hier ist eine Demo: http://codepen.io/chrisboon27/pen/ACdka

Option 1: :: vor psuedo-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ßes 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-Schatten-Methode (Variation der gif-Methode - kann Performance-Problem 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; 
}