Geben Sie Tipps zur Verwendung der pointer-events-Eigenschaft von CSS, um Mauspenetrationseffekte zu erzielen

Der Aufgabenbereich von CSS und JavaScript in modernen Browsern verschwimmt zunehmend. 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
Verhindern Sie, dass die Standardmaus angezeigt wird Zeiger
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 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 das Attribut ein aktuelle Ebene. In SVG hat dieser Wert die gleiche Wirkung wie „visiblePainted“.
Dieses Pointer-Events-Attribut verfügt über viele verfügbare Attributwerte, die meisten davon gelten jedoch für SVG: auto, none, VisiblePainted*, VisibleFill*, VisibleStroke*, Visible*, Painted*, Fill*, Stroke*, All*, 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 Listener die Pointer-Events-Einstellungen.

Das obige ist der detaillierte Inhalt vonGeben Sie Tipps zur Verwendung der pointer-events-Eigenschaft von CSS, um Mauspenetrationseffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!