it-swarm.com.de

CSS: Ein Element beim Schweben aufhellen

Angenommen, ein Element ist zu 100% gesättigt, undurchsichtig usw. Wie kann ich sein Hintergrund etwas heller werden lassen, wenn es schwebt?

Der Anwendungsfall ist, dass ich einem Benutzer erlaube, über ein Element auf einer Seite zu schweben. Ich möchte nicht jede Farbe mit einer Deckkraft von 80% bestimmen.

Eine Methode besteht darin, die opacity: 0.4 aber ich möchte nur den Hintergrund ändern.

37
Don P

Es ist lange her, aber Sie können so etwas tun:

.element {
    background-color: red;
}
.element:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

Sie können die 100px in eine Zahl ändern, die Sie möchten. Ich habe einen großen genommen, um das ganze Element abzudecken.

Es ist keine sehr schöne Lösung, aber es funktioniert!

Hier ein Beispiel: http://jsfiddle.net/6nkh3u7k/5/

61
del4y

Das geht ganz einfach:

.myElement:hover {
  filter: brightness(150%);
}
33
satnam

verwenden Sie dazu die RGBa-Methode (background-color:rgba(R,G,B,alpha);):

.element{
    background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/
} 
.element:hover{
    background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}

[~ # ~] Geige [~ # ~]

UND wenn Sie es unbedingt in IE8 oder niedriger zum Laufen bringen müssen, dann ist es so:

.element:hover{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
      zoom: 1;
}

beachten Sie, dass die Werte startColorstr und endColorstr folgendermaßen aufgebaut sind: #AARRGGBB (wobei AA der Alpha-Kanal ist) und muss identisch sein, wenn Sie keinen Verlaufseffekt von einer Farbe zu einer anderen wünschen.

7
Yenn

Sie können dies nur mit CSS tun, indem Sie filter: brightness(); verwenden. Derzeit wird dies jedoch nur in WebKit-Browsern unterstützt. Siehe http://jsfiddle.net/jSyK7/

4
David Storey

Ich würde ein :after - Pseudoelement anstelle eines herkömmlichen Hintergrunds verwenden. Es wird in IE8 unterstützt, wo rgba() nicht ist.

HTML:

<div class="hoverme">
    <p>Lorem ipsem gimme a dollar!</p>
</div>

CSS:

.hoverme {
    position: relative;
}
.hoverme:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    z-index: -1;
}

.hoverme:hover:after {
    background-color: #ddd;
}

oder etwas ähnliches.

http://caniuse.com/#search=%3Aafter

Fügen Sie einen CSS3-Übergang hinzu, um ein reibungsloseres Ergebnis zu erzielen:

.hoverme:after {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

Das vorherige Snippet wurde von http://css3please.com kopiert und eingefügt

http://jsfiddle.net/ghodmode/6sE9E/

3
user166560

Sie möchten das background-color Helligkeit eines Elements, das ohne Verwendung von Deckkraft über dem Bildschirm angezeigt wird. Leider. Ich denke nicht, dass dies möglich ist, ohne bestimmte background-color Werte für Ihre Schwebeflüge.

Der Anwendungsfall ist, dass ich einem Benutzer erlaube, über ein Element auf einer Seite zu schweben. Ich möchte nicht jede Farbe mit einer Deckkraft von 80% bestimmen.

Es gibt eine Alternative, die ich mir vorstellen kann, für die jedoch eine durchscheinende PNG-Überlagerung des gesamten Elements erforderlich ist, die auch den Inhalt des Elements abdeckt. Lösen Sie damit Ihr Problem nicht.

Verwandte Frage: Ändere dynamisch die Farbe in heller oder dunkler durch prozentuales CSS (Javascript)

2
Chris Bier

Ich benutze die box-shadow -Eigenschaft, um die Helligkeit der Hintergrundfarbe durch Platzieren einer durchscheinenden Überlagerung zu steuern

Beispiel:

.btn {

  background-color: #0077dd;
  
  display: inline-flex;
  align-content: center;
  padding: 1em 2em;
  border-radius: 5px;
  color: white;
  font-size: 18px;
  margin: 0.5em;
  cursor: pointer;
}

.btn.brighten:hover {
  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.3);
}

.btn.darken:hover {
  box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.3);
}
<span class="btn brighten">Brighten on Hover</span>
<span class="btn darken">Darken on Hover</span>
0
Arik