Share
In diesem kurzen Tipp erfahren Sie, wie Sie das Aussehen des Cursors mit CSS anpassen. Wir werden unseren Cursor in Pfeile ändern, um das Navigieren in einer Diashow zu erleichtern. Um es besser zu verstehen, gehen wir zwei separate Beispiele durch.
Hinweis: Das Ziel dieses Artikels ist es nicht, das Thema ausführlich zu behandeln Mauszeiger Syntax der Eigenschaft. Um eine genauere Untersuchung zu erhalten, sollten Sie die Ressourcen am Ende des Tutorials überprüfen.
Im ersten Beispiel wird erläutert, wie das Cursorbild in Abhängigkeit von der Mausposition geändert wird.
Hier ist die Demo, die wir in Aktion bauen werden:
Wir beginnen mit einem einfachen Bild:
Als Nächstes definieren wir zwei CSS-Klassen, die die Cursorbilder enthalten:
.Cursor-prev Cursor: URL (Cursor-prev.cur), auto; / * IE & Edge * / Cursor: URL (Cursor-prev.svg) 16 16, auto; / * Rest-Browser * / .cursor-next Cursor: URL (Cursor-Next.cur), auto; / * IE & Edge * / Cursor: URL (Cursor-next.svg) 16 16, auto; / * Restbrowser * /
Beachten Sie, dass wir für jede Regel zwei Cursor-Deklarationen angeben. Die erste Deklaration jeder Regel richtet sich an Microsoft-Browser, die zweite an andere Browser. Alle Werte zeigen auf ein Bild mit der Auto Keyword-Wert als Fallback.
Es ist erwähnenswert, dass wir mehr als eine benutzerdefinierte URL oder ein benutzerdefiniertes Bild angeben können. Ein Browser versucht, sie anhand der in den Werten festgelegten Reihenfolge zu laden. Das heißt, zunächst wird versucht, das erste Bild zu laden. Wenn dieses Bild aus irgendeinem Grund nicht verfügbar ist, wird versucht, das zweite zu laden und so weiter. Wenn keines der Bilder vorhanden ist, wird das Fallback-Schlüsselwort verwendet.
Bevor wir fortfahren, heben wir einige aktuelle Einschränkungen hervor (auch nach meinen Tests) und erläutern, warum wir zwei separate Deklarationen festlegen:
Wenn alle Seitenelemente fertig sind, wird die drin Funktion wird ausgeführt.
Innerhalb dieser Funktion rufen wir zuerst die Bildbreite ab.
Als Nächstes führen wir jedes Mal, wenn wir über das Bild fahren, folgende Schritte aus:
Accentsconagua
Cursor weiter Klasse, sonst die Cursor-prev Klasse wird hinzugefügt.Der Code, der für all dieses Verhalten verantwortlich ist, lautet wie folgt:
window.addEventListener ("load", init); Funktion init () const img = document.querySelector ("img"); const width = img.getBoundingClientRect (); const halfImgWidth = width / 2; img.addEventListener ("mousemove", Funktion (e) const xPos = e.pageX - img.offsetLeft; this.classList.remove ("Cursor-prev", "Cursor-next"); if (xPos> halfImgWidth) this.classList.add ("Cursor-next"); else this.classList.add ("Cursor-prev");); Für das zweite Beispiel verwenden wir die in einem früheren Beitrag erstellte Demo. Schau mal:
Hier sehen Position und Aussehen der Navigationspfeile folgendermaßen aus:
Lassen Sie uns diese anpassen, um die Navigation zu erleichtern. Jeder der Pfeile sollte die Hälfte der Karussellbreite abdecken, und ihre Höhe sollte der Karussellhöhe entsprechen. Plus, wir werden die Vorteile nutzen Mauszeiger Eigenschaft, um die Pfeile-Symbole festzulegen.
Hier ist das erforderliche CSS:
.Eulen-Karussell .owl-nav [Klasse * = Eule-] Position: absolut; oben: 0; unten: 0; Breite: 50%; Marge: 0; .owl-carousel .owl-nav .owl-prev left: 0; Cursor: URL (Cursor-prev.cur), verschieben; Cursor: URL (Cursor-prev.svg) 16 16, verschieben; .owl-carousel .owl-nav .owl-next right: 0; Cursor: URL (Cursor-next.cur), verschieben; Cursor: URL (Cursor-next.svg) 16 16, verschieben; .owl-carousel .owl-nav svg display: none;
Beachten Sie, dass die Cursorbilder aus unserem vorherigen Beispiel stammen. Der einzige Unterschied ist, dass wir das angeben Bewegung Schlüsselwortwert als Fallback für den Fall, dass das zugehörige Bild nicht geladen werden kann.
Hier ist das Ergebnis:
Diese Technik funktioniert in unserem Beispiel gut, abgesehen von einer Sache. Die Navigationspfeile befinden sich über dem Text der Folien, sodass wir nicht auf die Call-to-Action-Schaltflächen klicken können.
Normalerweise könnte ein einfacher Fix ein positives Ergebnis sein z-index zu diesem Text (und geben Sie es Position: relativ). Diese Lösung funktioniert jedoch nicht, da sich Text und Pfeile in unterschiedlichen Stapelkontexten befinden (verwenden Sie den Browser-Inspektor, um sie anzuzeigen)..
Wieder tritt dieses Problem für unsere Demo auf. In Ihren Projekten kann sich Ihre Struktur unterscheiden (z. B. haben Sie nur Bilder oder der Text befindet sich unter dem Bild), und möglicherweise treten Sie diesem Problem nicht auf. Außerdem verwenden Sie wahrscheinlich ein anderes Karussell mit einer anderen Auszeichnung.
In jedem Fall können Sie dieses Problem mithilfe von JavaScript lösen. Jedes Mal, wenn sich der benutzerdefinierte Cursor innerhalb der Grenzen der Zielschaltfläche / des Zieltextes befindet, erhält der zugehörige Pfeil ein Negativ z-index oder verschwindet.
Versuchen Sie, dieses Update selbst herauszufinden, und veröffentlichen Sie Ihre Lösung in den Kommentaren!
In diesem kurzen Tipp wurde beschrieben, wie Sie das Aussehen des Cursors mit CSS bearbeiten können. Wie wir gesehen haben, kann dies eine Herausforderung sein, da nicht alle Browser dieselbe Syntax unterstützen. Durch das Hinzufügen von Stilen zum Cursor können wir die Benutzererfahrung verbessern.
Mauszeiger Eigenschaft in der CSS Basic User Interface-Modulebene 3 (CSS3-Benutzeroberfläche) 