CSS: Aufhellen eines Elements bei Hover

Angenommen, ein element ist bei 100% Sättigung, Deckkraft, etc... wie kann ich seine hintergrund werden etwas heller, wenn es schwebte?

Den Anwendungsfall ist, dass ich einem Benutzer erlauben, den Mauszeiger über ein element auf einer Seite. Ich will nicht zu gehen um die Bestimmung der einzelnen Farben entspricht bei 80% Deckkraft.

Einer Methode zu ändern, die opacity: 0.4 aber ich will nur den hintergrund zu ändern.

InformationsquelleAutor der Frage Don P | 2013-04-23

  1. 46

    Es ist lange her, aber können Sie etwas wie das hier tun:

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

    Können Sie ändern Sie die 100px in einer Nummer, die Sie wollen. Ich nahm einen großen auf das gesamte element.

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

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

    InformationsquelleAutor der Antwort del4y

  2. 13

    Hier ist eine einfache Möglichkeit, es zu tun:

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

    InformationsquelleAutor der Antwort satnam

  3. 7

    sollten Sie die Verwendung der RGBa-Methode (background-color:rgba(R,G,B,alpha);) um dies zu tun:

    .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 dringend benötigen, damit es funktioniert im IE8 oder niedriger, auch hier ist, wie es kommt: 

    .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 startColorstr und endColorstr Werte sind so gebaut #AARRGGBB (wo AA ist der Alpha-Kanal) und muss die gleiche sein, wenn Sie nicht möchten, dass ein Farbverlauf von einer Farbe zu einer anderen.

    InformationsquelleAutor der Antwort Yenn

  4. 3

    Ich mit einem :after pseudo-element anstelle eines konventionellen hintergrund. Es unterstützt im IE8, wo rgba() nicht.

    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 sowas.

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

    Für ein glatteres Ergebnis, fügen Sie eine CSS3 transition:

    .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+ */
}

    Den vorherigen Schnipsel kopiert und eingefügt von http://css3please.com

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

    InformationsquelleAutor der Antwort

  5. 3

    Können Sie dies mit nur CSS mit filter: brightness(); aber es ist derzeit nur in WebKit-Browsern unterstützt. Sehen http://jsfiddle.net/jSyK7/

    InformationsquelleAutor der Antwort David Storey

  6. 2

    Den Sie ändern möchten die background-color Leichtigkeit von jedem element, das schwebte, ohne mit der Deckkraft. Leider. Ich glaube nicht, dass dies möglich ist, ohne Festlegung spezifischer background-color Werte für Ihr schwebt.

    Den Anwendungsfall ist, dass ich einem Benutzer erlauben, den Mauszeiger über ein element auf
    ein Seite. Ich will nicht zu gehen um die Bestimmung der einzelnen Farben entspricht
    bei 80% Deckkraft.

    Gibt es eine alternative, die ich mir denken kann, aber es bräuchte einen durchscheinenden, PNG-overlay, die auf das gesamte element, auch die wird verdecken Sie nicht den Inhalt des Elements. Damit nicht Ihr problem zu lösen.

    Verwandte Frage: Die Farbe dynamisch ändern, um heller oder dunkler Prozentsatz CSS (Javascript)

    InformationsquelleAutor der Antwort Chris Bier

Schreibe einen Kommentar