Heim > Web-Frontend > CSS-Tutorial > So implementieren Sie nicht anklickbare Funktionsstile in CSS

So implementieren Sie nicht anklickbare Funktionsstile in CSS

青灯夜游
Freigeben: 2021-07-02 16:35:54
Original
3591 Leute haben es durchsucht

Implementierungsmethode: 1. Fügen Sie dem Element direkt den Stil „pointer-events:none;“ hinzu, um das Auslösen von Ereignissen zu verhindern und es nicht anklickbar zu machen. 2. Fügen Sie dem Element zunächst den Stil „cursor:not-allowed;“ hinzu. Verwenden Sie dann den js-Code, um zu verhindern, dass das Klickereignis ausgelöst wird, sodass es nicht anklickbar ist.

So implementieren Sie nicht anklickbare Funktionsstile in CSS

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

Der Stil, wenn die Maus nicht anklickbar ist

cursor:not-allowed;
Nach dem Login kopieren

Der Effekt ist wie folgt:

Es ist zu beachten, dass der Stil zwar als nicht anklickbar angezeigt wird, das Klicken jedoch dennoch das entsprechende Ereignis auslöst.

Auslösende Ereignisse verbieten

pointer-events:none;
Nach dem Login kopieren

Mit diesem Stil wird verhindert, dass Ereignisse ausgelöst werden. Die Maus wird im Pfeilstil angezeigt.

Wenn diese beiden Stile gleichzeitig verwendet werden, wird das Auslösen des Ereignisses verhindert, aber die Maus wird nicht wie gewünscht im deaktivierten Stil angezeigt. wird aber im Pfeilstil angezeigt.

Wenn wir den Effekt implementieren, können wir cursor:not-allowed; verwenden und dann js-Code verwenden, um zu verhindern, dass das Ereignis ausgelöst wird;

cursor:not-allowed;
pointer-events:none;
Nach dem Login kopieren

(Lernvideo-Sharing: css-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie nicht anklickbare Funktionsstile in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage