Mauszeiger und Klicken

Zeige auf einer beliebigen Website auf einen Link: Der Mauszeiger wird zu einer Hand, die sagt: „Hier kannst du klicken.“ Über unserem Button bleibt der Mauszeiger dagegen ein Pfeil. So zeigen Browser ihn über Buttons an, und Tailwind belässt es dabei. Trotzdem zeigen die meisten Websites auch über Buttons die Hand, weil die Leute sie von Links kennen. Genau das macht die Klasse cursor-pointer: Sie setzt das CSS cursor: pointer.

Ein paar andere Werte von cursor, die nützlich sein können:

• cursor-default: der gewöhnliche Pfeil,
• cursor-text: der Textcursor, wie über einem Textfeld,
• cursor-not-allowed: ein durchgestrichener Kreis für Dinge, die man nicht anklicken kann. Den brauchst du später in dieser Lektion.

Ein Button kann auch zeigen, dass er gerade gedrückt wird. Die Variante active: wendet eine Klasse an, solange du das Element drückst: von dem Moment, in dem du die Maustaste über ihm drückst, bis du sie loslässt (in CSS die Pseudoklasse :active). Ein noch dunklerer Hintergrund passt gut: active:bg-orange-700 Tiger adoptieren.

Während du den Button drückst, steht der Mauszeiger über ihm, also gelten hover:bg-orange-600 und active:bg-orange-700 gleichzeitig. Welche gewinnt? In deinem eigenen CSS wäre es die Regel, die später steht. In Tailwind musst du darüber nicht nachdenken: Tailwind schreibt die Regeln für seine Varianten in einer festen Reihenfolge, mit active: nach hover:, also gewinnt das Aussehen beim Drücken. Die Reihenfolge der Klassen im Attribut class spielt keine Rolle, genau wie bisher.