Beispiel für die Verwendung eines CSS-Filters zum Schreiben von Mouseover-Effekten

Verwenden Sie einen CSS-Filter, um den Mouseover-Effekt zu schreiben

<div Klasse="Filter-div">
  <img class="filter-img" src="../assets/images/01list.png"/>
</div>
<Stil>
    .filter-div {
      Breite: 67px;
      Höhe: 50px;
      Hintergrund: #fff;
      &:schweben {
          Hintergrund: #5d7aae;
        }
    }
    .filter-img {
      Breite: 67px;
      Höhe: 50px;
      &:schweben {
         Filter: Helligkeit (100);
      }
    }
</Stil>

Kein Hovern vor dem Platzieren der Maus

Nach dem Platzieren der Maus erscheint ein Hover

Mit dem CSS filter:brightness(100) lässt sich das Bild linear multiplizieren, sodass es heller oder dunkler erscheint. Wenn der Wert 0 % oder 0 beträgt, ist das Bild vollständig schwarz. Ein Wert von 100 % bewirkt keine Veränderung am Bild. Andere Werte entsprechen einem linearen Multiplikatoreffekt. Werte über 100 % sind möglich und das Bild wird heller als zuvor. Wenn kein Wert festgelegt ist, ist der Standardwert 1. Wenn Sie das Bild weiß färben möchten, ist der Wert 100.

Da die herkömmliche Hover-Methode die Quelle von img ändert, blinkt das Bild beim ersten Hovern weiß, da das Bild neu geladen werden muss. Der Vorteil dieser Methode besteht darin, dass das Bild nur einmal geladen werden muss. Natürlich hat diese Methode auch Einschränkungen. Sie können mich gerne korrigieren.

Dies ist das Ende dieses Artikels über die Verwendung von CSS-Filtern zum Schreiben von Beispielen für Mouse-Rollover-Effekte. Weitere relevante Inhalte zu CSS-Filtern für Mouse-Rollover finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!