Teilen Sie 6 Einführungen zu Zeigerattributen-CSS-Tutorial-php.cn

Teilen Sie 6 Einführungen zu Zeigerattributen

零下一度

Freigeben： 2017-06-02 15:08:47

Original

1848 Leute haben es durchsucht

Eigentlich kenne ich dieses Attribut schon seit langem, aber ich habe es nie studiert. Ich habe dieses Wort heute zufällig auf Twitter gesehen, also habe ich es recherchiert und es hat nur ein kleines Problem gelöst, auf das ich gestoßen bin, also habe ich es geteilt. Nun, eigentlich ist dies eine relativ einfache CSS3-Eigenschaft. Werfen wir einen Blick auf meine ausführliche Einführung in das Zeigerattribut.

1. Tipps zur Verwendung des Pointer-Events-Attributs von CSS zur Erzielung von Mauspenetrationseffekten

Teilen Sie 6 Einführungen zu Zeigerattributen

Zuallererst das Das Bild oben ist ein Die Produkte auf der Produktlistenseite von East Mall haben in der oberen rechten Ecke ein „Shocking Price“-Symbol. Jeder weiß, dass dies mit einer Beschriftung versehen ist, die das Produktbild unten abdeckt „Shocking Price“ Sie können nicht auf den Link zum Bild hinter dem „Hot Price“-Bild klicken. Natürlich können wir auch einen Link zu diesem Symbol hinzufügen, was das Problem löst. (Heute reden wir nicht über so etwas Einfaches, lasst uns weitermachen)

Der Aufgabenbereich von CSS und JavaScript in modernen Browsern wird immer unschärfer und unklarer. Beispielsweise kann das Attribut -webkit-touch-callout in CSS verhindern, dass die Bubble-Box angezeigt wird, wenn der Benutzer in iOS darauf klickt. Der in diesem Artikel besprochene Stil der Zeigerereignisse ähnelt eher JavaScript. Er kann:

Verhindern, dass die Klickaktion des Benutzers irgendeine Wirkung erzeugt
3. Verhindern Sie, dass Ereignisse durch Hover- und aktive Statusänderungen in CSS ausgelöst werden.
4. Verhindern Sie, dass Ereignisse durch JavaScript-Klickaktionen ausgelöst werden.
Eine CSS-Eigenschaft kann so viele Dinge bewirken!

Einführung in CSS, um den Maus- in den Handstil zu ändern

Im p oder anderen von Ihnen selbst festgelegten Tags wird der Schiebevorgang für ein besseres Erlebnis sein, Ändern Sie die Maus in eine Geste

Fassen Sie kurz die entsprechenden CSS-Stile zusammen. Fügen Sie einfach den Cursor:Zeiger zum p hinzu, an dem sich

befindet.

Über das seltsame Verhalten des Pointer-Events-Attributs in css_html/css_WEB-ITnose

In meiner Erinnerung wird Pointer-Events für das Event-Routing verwendet Das heißt, wenn pointer-events:none auf das übergeordnete Element gesetzt ist, hört das übergeordnete Element nicht mehr auf Mausereignisse (ähnlich wie Berührung, Klick usw.).

Wenn wir dies tun müssen, möchten wir normalerweise in die übergeordnete Ebene „eindringen“. Wenn wir direkt auf das untergeordnete Element klicken, verhält sich das übergeordnete Element so, als ob nichts passiert wäre. Dies sind Informationen, die aus meinem bisherigen Wissensbestand stammen. Es scheint jetzt nicht falsch zu sein, aber es ist unvollständig.

CSS schützt Mausereignisse von Elementen pointer-events_html/css_WEB-ITnose

//Klicks abschirmen

$(&#39;body&#39;).css(&#39;pointer-events&#39;,&#39;none&#39;);

Nach dem Login kopieren

//Wiederherstellen auf Standard

$(&#39;body&#39;).css(&#39;pointer-events&#39;,&#39;auto&#39;);

Nach dem Login kopieren

Verwendung: Sie können die Mausereignisse der folgenden Elemente beim Öffnen der Ebene oder bei fester Positionierung festlegen

5. events_html/ css_WEB-ITnose

Nachdem ein absolut positioniertes Element einen Link überdeckt oder ein Element mit einem Ereignishandle hinzufügt, wird das Standardverhalten des Links (Seitensprung) oder das Elementereignis nicht ausgelöst.

Jetzt unterstützt Firefox3.6+/Safari4+/Chrome ein CSS-Attribut namens pointer-events. Verwenden Sie dieses Attribut, um zu bestimmen, ob Sie absolut positionierte Elemente durchdringen können, um bestimmte Verhaltensweisen der folgenden Elemente auszulösen:

Cursor-Maus-Stil??

Wenn wir DIV-CSS entwerfen, werden wir auf die Steuerung des Mauszeigers innerhalb des Objekts stoßen, z. B. auf die Bewegung der Maus durch den Zeiger und die Umwandlung in eine Fingerform Führen Sie die Cursorsteuerung im Mauszeigerstil ein. Zusätzlich zum standardmäßigen Mauszeigerstil des Systems können Sie das Bild über CSS als Mauszeiger festlegen. Es ist üblich, dass einige Websites verschiedene kleine Bildstile für den Mauszeiger haben CSS-Cursor.

Verwandte Fragen und Antworten zum Zeiger-Attribut: Teilen Sie 6 Einführungen zu Zeigerattributen

1.Fragen zum CSS3-Zeiger-Ereignis: keine; 🎜>

2. Objective-C – RAC: Senden von inkompatiblen Blockzeigertypen

[Verwandte Empfehlungen]

php. cn Dugujiu Cheap (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie 6 Einführungen zu Zeigerattributen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!