CSS-Problem: Pointer-Events und Cursor-Aussehen?

#knopf-weiter {pointer-events: none; cursor: not-allowed;}

.wennauswahlgetroffen {pointer-events: all !important;}

Dieser Code hier bedeutet, dass der Knopf, der einen Link enthält erst klickbar wird, wenn eine Bedindung erfüllt wurde. Mein Problem ist aber das bei "pointer-events: none" der Cursor auf "not-allowed" nicht mehr angezeigt wird sondern nur die normale Maus. Ich will aber dass ich den Cursor ändern kann.

Answer 1

[regex9]

Wenn du das Property pointer-events auf none setzt, bedeutet das, dass du mittels Maus nicht mehr mit dem dazugehörigen Element interagieren kannst. Das Elternelement ist dann das neue Zielelement, welches auf die Aktionen reagiert.

Für deinen Fall solltest du das cursor-Property also auf einem Elternelement des Knopfs setzen.

Comments

[Zebra321]

Es gibt aber kein Elternelement? :C

[regex9]

@Zebra321

Dann kann es auch keinen Knopf geben.

[Zebra321]

@regex9

Also klar gibt es ein Elternelement, aber es gibt halt nichts was direkt drumrum ist. Das nächstgrößere Element ist der body...

[regex9]

@Zebra321

Und wieso platzierst du den Knopf dann nicht in in ein Element (z.B. div), welches du neu einfügst? Das Verhalten diesen neuen Elements (Größe o.ä.) kannst du via CSS definieren.

[Zebra321]

@regex9

Weil ich das ja um jeden einzelnen Knopf rum dann platzieren müsste... ist auch irgendwie unschön oder? Gibt es keinen anderen Weg? Oder kann man dieses Rundherum auch via CSS irgendwie einfügen? Es gibt ja doch auch properties wie Resize oder? Dass der Knopf größer wird? Und es gibt ja auch Sachen wie .append oder .html wo man Text hinzufügen kann, der im HTML vorher nicht stand also geht vllt ein Objekt wie einen Rahmen hinzuzufügen? Gibt es einen anderen Weg? Ich suche einfach einfache CSS Lösungen sofern möglich ohne das HTML bearbeiten zu müssen, weil das bei 100 Knöpfen dann hinzufügen müsste im HTML Code.

[regex9]

@Zebra321

Gibt es keinen anderen Weg?

Verzichte auf pointer-events. Es ist eh eine schlechte Lösung. Sofern dein Knopf ein button-Element ist, deaktiviere es:

<button disabled>...</button>

Wenn dein Knopf jedoch einem Link (<a>) entspricht, blende ihn aus, solange er non-funktional ist. Zeige Nutzern keine Elemente, mit denen er eh nicht interagieren kann.

[Zebra321]

@regex9

Mein Knopf ist ein div und kein button. Was bewirkt denn disabled bei buttons? Und es ist ein <a> Link um das div herum. Ich möchte den Knopf anzeigen. Auf Gutefrage ist es doch genauso! Der Absenden oder Weiter Knopf bei Nachrichten wird ja auch ständig angezeigt, auch wenn noch nicht klickbar. Also nein, möchte ich nicht ausblenden.