So verwenden Sie die Pointer-Events-Eigenschaft von CSS, um einen Mauspenetrationseffekt zu erzielen

Dieser Artikel stellt hauptsächlich vor, wie man das Pointer-Events-Attribut von CSS verwendet, um den Mauspenetrationseffekt zu erzielen. Jetzt kann ich es mit Ihnen teilen.

Wenn pointer Nachdem der Wert von -events auf none gesetzt ist, erhält der Browser das Klickereignis der Maus auf der Ebene an der aktuellen Position nicht, was den Effekt der Mauspenetration verursacht. Lassen Sie uns die Implementierung mithilfe des Attributs pointer-events erklären von CSS. Der Zaubertrick des Mauspenetrationseffekts

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:
1 verhindern, dass die Klickaktion des Benutzers irgendeine Wirkung erzeugt
2. Die Anzeige des Standardmauszeigers verhindern
. Verhindern Sie, dass CSS-Änderungen in Hover- und aktiven Zuständen Ereignisse auslösen
4. Verhindern Sie, dass JavaScript-Klickaktionen Ereignisse auslösen
Eine CSS-Eigenschaft kann so viele Dinge tun!

Bei Verwendung von pointer-events:none bedeutet dies, dass keine Klicks erfasst werden, sondern das Ereignis einfach darunter eindringen lässt. Der Code lautet wie folgt:

<style>   
 .overlay {   
  pointer-events: none;   
 }   
</style>   
<p id="overlay" class="overlay"></p>

Wenn der Wert auto ist, ist der Effekt derselbe, als ob das Attribut pointer-events nicht definiert wäre, und die Maus dringt nicht in die aktuelle Ebene ein. In SVG hat dieser Wert die gleiche Wirkung wie „visiblePainted“.

Dieses Pointer-Events-Attribut verfügt über viele verfügbare Attributwerte, die meisten davon sind jedoch für SVG: auto, none, sichtbarPainted*, sichtbarFill*, sichtbarStroke*, sichtbar*, bemalt*, Füllung*, Strich*, alle* und erben.

Einige Dinge, die Sie zu Zeigerereignissen beachten sollten:
1. Untergeordnete Elemente können Zeigerereignisse deklarieren, um die Blockierungsbeschränkung für Mausereignisse des übergeordneten Elements aufzuheben.
2. Wenn Sie einen Click-Event-Listener für ein Element festlegen und dann die Stildeklaration „pointer-events“ entfernen oder seinen Wert auf „auto“ ändern, wird der Listener wieder wirksam. Grundsätzlich respektiert der Zuhörer die Zeigerereignisse-Einstellungen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Informationen zur Verwendung des Tabellenzellenattributs in CSS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Pointer-Events-Eigenschaft von CSS, um einen Mauspenetrationseffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!