Über CSS zum Hinzufügen eines Schaltflächenereignisses (wie man ein CSS-Mausklickereignis schreibt)

ainer">

Wir müssen tatsächlich viele Male Mauseffekte auf Webseiten festlegen. Einige werden automatisch generiert, z. B. ein Link. Wenn die Maus nach oben bewegt wird, verwandelt sie sich beim Klicken automatisch in eine Hand. , manchmal, wenn es ein Eingabefeld gibt, verwandelt sich die Maus automatisch in ein englisches Großbuchstaben I. Können wir also mehr Objekte so einstellen, dass sie so aussehen, wie wir es brauchen? Das ist durchaus möglich

Als nächstes sehen wir uns den Effekt an

Andere Mausereignisse:

onClick: Mausklick-Ereignis (Bezieht sich auf das Mausklick-Ereignis und gibt es dann frei.)

onDblClick: Maus-Doppelklick-Ereignis, losgelassen und erneut gedrückt Die Maus wird gedrückt.)

onMouseUp: (Bezieht sich auf das Mausfreigabeereignis vom gedrückten Zustand bis zum Popup. .)

onMouseMove: Mausbewegungsereignis (Bezieht sich auf das Bewegen der Maus auf einem bestimmten Element.)

onMouseOver: (Bezieht sich auf, wenn sich der Zeiger von außen auf das Element bewegt.)

onMouseOut: Mouse-Leaving-Ereignis (Tritt auf, wenn die Maus ein bestimmtes Element verlässt.)

onLoad: Ladeereignis oder die Seite wird geladen.)

onUnload: Entladeereignis. )

onScroll: Bildlaufereignis der Bildlaufleiste (wird generiert, wenn sich ein Besucher mit dem Scrollrad nach oben oder unten bewegt.)

Fall:

Wenden Sie diesen benutzerdefinierten Stil auf das Bild an und sehen Sie sich das Bild in Schwarzweiß an. Dieser Stil hat keinen Inhalt und ist ein leerer Stil:

<div onmouseover=\"this.className=\'over\';\"><div onmouseover=\"this.className=\'over\'; this.id=\'over\';\"><div onmouseover=\"this.style.background=\'url(bj.png) no-repeat\';\" onmouseout=\"…;…\">

Dann fügen Sie „onMouseOver=“ hinzu " this.className zum Bild-Tag (IMG) ='over'" onMouseOut="this.className='out'"", was bedeutet, dass sich das Bild beim Überfahren mit der Maus im Over-Stil befindet, d. h. a normales Farbbild; wenn die Maus geht, ist das Bild im Out-Stil, das heißt, ein Schwarzweißbild ist ein Mausereignis, this.className="..." bedeutet den Klassennamen des aktuellen Objekts ist..., achten Sie darauf, nicht die falsche Groß- und Kleinschreibung zu schreiben, JS reagiert sehr empfindlich auf Groß- und Kleinschreibung

Auf diese Weise ist der Effekt abgeschlossen, speichern Sie ihn und durchsuchen Sie ihn. Wenn Sie es im Browser öffnen, ist das Bild schwarzweiß. Wenn Sie die Maus nach oben bewegen, wird das Bild farbig. Wenn Sie die Maus wegbewegen, können Sie mit der this.className-Methode viele schöne Dinge erstellen Effekt.

Mauszeiger:

<style type=\"text/css\">  .over {}.out {filter: Gray}</style>

CSS-Definition und Verwendung

:Hover-Selektor wird verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt.

Tipps: Der :Hover-Selektor kann für alle Elemente verwendet werden, nicht nur für Links .

Tipps: Der :link-Selektor legt den Stil von Links fest, die auf Seiten verweisen, die noch nicht besucht wurden. Der :visited-Selektor wird zum Setzen von Links zu Seiten verwendet, die bereits besucht wurden, und der :active-Selektor wird für aktive Links verwendet.

Hinweis: In der CSS-Definition muss :hover nach :link und :visited (falls vorhanden) platziert werden, damit der Stil wirksam wird.

Das obige ist der detaillierte Inhalt vonÜber CSS zum Hinzufügen eines Schaltflächenereignisses (wie man ein CSS-Mausklickereignis schreibt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!