Cursor verhindern

[Blumentopf]

Ich verwende manchmal ein div oder span ohne Inhalt, um mittels eines einseitig angebrachten Rahmens eine Linie zu erstellen. Vermutlich wird nun jemand sagen, dass man das nicht tun sollte, oder das es Quatsch ist, das auf diese Art zu lösen. Aber angenommen, man tut es: Gibt es eine Möglichkeit, zu verhindern, dass am Anfang der Linie ein Cursor angezeigt wird, wenn man als Nutzer auf die Linie klickt? Ich möchte dabei die Linie nicht durch ein anderes Element verdecken.

[Matthias Apsel]

Hallo Blumentopf,

.class { cursor: none }

Bis demnächst
Matthias

[Blumentopf]

Danke, probiere ich gleich aus.

[Rolf B]

Hallo Blumentopf,

wieso ein Cursor? Den Begriff Cursor verbindet man mit dem Mauszeiger, oder dem blinkenden Strich (oder Block) in Eingabefeldern. So was sollte durch Klicken nicht zu erzeugen gehen, es sei denn du spielst mit contenteditable herum. Vermutlich hat dein Element Inhalt (Whitespace), und der wird selektiert.

Du kannst versuchen, dieses Whitespace zu beseitigen (Endeelement unmittelbar hinter das öffnende Element setzen) oder per CSS user-select:none einstellen.

Welche eleganteren Alternativen es gibt, kann ich ohne ein Beispiel deines Markup/CSS nicht sagen. Es ist durchaus üblich, für Zierlinien Boxen zu verwenden und Rahmen zu setzen. Die sind dann aber möglichst nicht im HTML, sondern als Pseudoelemente per CSS eingefügt. Was auch geht sind Hintergrundbilder als SVG. Kommt immer auf deine Tools, Kenntnisse und Umstände an.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Kommt immer auf deine Tools, Kenntnisse und Umstände an.

Auf die Tools? Nö, da sollte es nicht drauf ankommen.

“A carpenter is only as good as his tools. But only a shitty carpenter blames the tools.” —Mat Marquis’ Vater

Wenn man mit einem Tool nicht das gewünschte Ergebnis erzielen kann (welches aber prinzipiell erreichbar ist), dann ist es das falsche Tool für diesen Zweck und man muss ein geeigneteres nehmen.

Auf die Kenntnisse? Nun ja, ohne die nötigen Kenntnisse kommt man nicht unbedingt zur besten Lösung. Aber Kenntnisse kann man ja erweitern. Man wächst mit seinen Aufgaben.

Bleiben die Umstände. Darauf sollte es ankommen.

LLAP 🖖

[Blumentopf]

gemeint war ein blinkender Strich. Freut mich zu hören, dass das eine übliche Methode ist. Da war ich mir nicht so sicher. SVG fand ich in dem Fall unnötig aufwendig, da der gleiche Effekt in diesem einfachen Fall durch eine einzige Zeile Code erzielt werden kann.

Vielen Dank für die Tipps!

[Blumentopf]

Vielen Dank noch mal für die Antworten, ich habe es jetzt so gelöst:

-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */

(Quelle)

Ich hatte mich etwas unklar ausgedrückt, und meinte mit Cursor eigentlich den Selektor. cursor:none führte dann auch zu dem von mir nicht beabsichtigten Ergenbis, den Mauszeiger zu verstecken.