CSS cursor: alle waarden, eigen cursors en opacity
CSS cursor-galerij
CSS cursor: elke waarde om te testen, eigen cursors, opacity | We.Inc
Beweeg over een tegel voor elk van de 36 standaard CSS cursor-waarden, bouw een eigen afbeeldingscursor met hotspot en fallback, en leer wanneer u vervaagt met opacity, visibility of rgba.
De eigenschap cursor bepaalt welke muisaanwijzer boven een element verschijnt, bijvoorbeeld cursor: pointer voor klikbare zaken, not-allowed voor uitgeschakelde bedieningselementen en grab voor versleepbare items. Eigen cursors gebruiken url() met een afbeelding, optionele hotspot-coördinaten en een verplicht trefwoord als fallback. Beweeg over elke tegel hieronder om alle 36 standaardwaarden in uw browser te zien.
De cursors die u het meest gebruikt
Toestand
CSS
Tailwind
Link of knop
cursor: pointer
Uitgeschakeld element
cursor: not-allowed
Versleepbaar / wordt versleept
cursor: grab / grabbing
cursor-grab / cursor-grabbing
Bewerkbare tekst
cursor: text
Kolombreedte aanpassen
cursor: col-resize
Bezig maar bruikbaar
cursor: progress
Cursornamen raad je makkelijk verkeerd, en elk besturingssysteem tekent ze net iets anders. Met deze galerij beweegt u in uw eigen browser over elk trefwoord. Daarna ziet u hoe u een eigen afbeeldingscursor maakt die netjes terugvalt, plus de bijpassende opacity-trucs voor vervaagde en uitgeschakelde toestanden.
Beweeg over een tegel in de galerij om die cursor te zien zoals uw systeem hem tekent. Klik op een tegel om de declaratie te kopiëren.
Gebruik het filter om de lijst te beperken tot links, formaat wijzigen, slepen of statuscursors.
Open de bouwer voor eigen cursors, pas de hotspot aan en test het resultaat in het testvlak.
Lees het deel over opacity om te kiezen tussen opacity, visibility en rgba-kleuren voor vervagingen.
Browsers tonen al pointer op links. Voeg hem zelf toe aan knoppen en andere klikbare elementen, want knoppen tonen standaard de pijl.
Houd eigen cursorafbeeldingen op 32 bij 32 pixels of kleiner. Grotere afbeeldingen worden door sommige browsers en besturingssystemen genegeerd.
Sluit een cursorlijst altijd af met een trefwoord zoals auto of pointer. Na url()-waarden is het trefwoord verplicht.
Touchscreens hebben helemaal geen cursor, dus gebruik de cursor nooit als enige teken dat iets interactief is.
Veelgestelde vragen
Hoe maak ik een eigen cursor in CSS?
Schrijf cursor: url(cursor.svg) 4 4, auto; waarbij de afbeelding een klein PNG-, SVG- of CUR-bestand is, de twee getallen de hotspot in pixels vanaf linksboven zijn, en auto het fallback-trefwoord is dat wordt gebruikt als de afbeelding mislukt. U kunt meerdere url()-afbeeldingen vóór het trefwoord opsommen.
Welke cursor hoort bij een uitgeschakelde knop?
not-allowed is de gebruikelijke keuze. Richt u erop met button:disabled { cursor: not-allowed; opacity: 0.5; } en behoud het echte disabled-attribuut, zodat ook toetsenbord- en schermlezergebruikers horen dat het element niet beschikbaar is, niet alleen muisgebruikers.
Wat is het verschil tussen opacity en visibility?
opacity vervaagt het hele element, inclusief de kinderen, en een volledig transparant element ontvangt nog steeds klikken en focus. visibility: hidden schakelt het element uit voor zowel de aanwijzer als hulptechnologie, terwijl de ruimte behouden blijft. Gebruik opacity voor de vervaging zelf en schakel aan het eind visibility om, zodat onzichtbare items niet aanklikbaar zijn.
Waarom wordt mijn tekst ook transparant door opacity?
opacity geldt voor alles binnen het element. Wilt u alleen de achtergrond doorzichtig maken, gebruik dan een doorschijnende kleur: background-color: rgb(0 0 0 / 0.5), of de oudere rgba(0, 0, 0, 0.5). De tekst blijft volledig dekkend.
Kan ik de cursor verbergen?
cursor: none verbergt hem boven het element, wat games, kiosken en videospelers soms nodig hebben. Gebruik het spaarzaam op gewone websites, want mensen raken kwijt waar ze naar wijzen.
Cursors zijn hints, geen bediening
De cursor vertelt muisgebruikers wat er gebeurt voordat ze klikken. Een pointer belooft een klikdoel, een tekstcursor belooft selecteerbare of bewerkbare tekst, en een pijl voor formaat wijzigen belooft slepen. Een pointer tonen op iets dat niets doet is een gebroken belofte.
Toetsenbord-, touch- en schermlezergebruikers zien deze hints nooit. Interactieve zaken moeten er nog steeds interactief uitzien, een zichtbare focusstijl hebben en echte knoppen en links gebruiken, zodat hun rol wordt voorgelezen.
Eigen afbeeldingscursors die niet breken
Een cursorafbeelding wordt opgehaald zoals elke andere afbeelding, dus bij een trage of mislukte download blijft het fallback-trefwoord staan. Een inline data:-SVG voorkomt het verzoek helemaal en blijft scherp op schermen met hoge pixeldichtheid.
De hotspot is de exacte pixel die klikt. Bij een pijl is dat de punt, meestal rond 0 0; bij een kruisdraad of cirkel is het het midden. Een verkeerde hotspot laat klikken een paar pixels naast het doel van mensen landen.
Dingen goed laten vervagen
Voor een uitgeschakelde look combineert u opacity rond 0.5 met cursor: not-allowed en het disabled-attribuut. Controleer of de vervaagde tekst nog aan de contrasteisen voldoet als mensen hem moeten lezen.
Voor onthullingen bij hover animeert u opacity, omdat dat goedkoop te renderen is, en koppelt u het aan visibility zodat het element niet aanklikbaar is terwijl het transparant is. Een kleur met een alfakanaal is het juiste gereedschap als slechts één laag, zoals een achtergrond of rand, doorschijnend moet zijn.
Alle 36 cursorwaarden
Standaard cursortrefwoorden (CSS Basic User Interface Level 4); Tailwind-klassen zijn cursor-<value>
Waarde
Groep
Betekenis
Algemeen
De browser beslist op basis van de context
Algemeen
De standaardpijl van het platform
Algemeen
Er wordt geen cursor getekend
Links en status
Er is een contextmenu beschikbaar
Links en status
Er is hulp beschikbaar
Links en status
Een link of klikbaar element
Links en status
Bezig, maar u kunt nog steeds interacteren
Links en status
Bezig, interactie kan nog niet
Selectie
Een of meer tabelcellen kunnen worden geselecteerd
Selectie
Nauwkeurige tweedimensionale selectie
Selectie
Tekst kan worden geselecteerd of bewerkt
Selectie
Verticale tekst kan worden geselecteerd
Slepen en neerzetten
Er wordt een snelkoppeling of alias gemaakt
Slepen en neerzetten
Iets wordt gekopieerd
Slepen en neerzetten
Iets wordt verplaatst
Slepen en neerzetten
Hier kan niet worden neergezet
Slepen en neerzetten
De actie is niet toegestaan
Slepen en neerzetten
Kan worden vastgepakt en versleept
Slepen en neerzetten
Wordt nu versleept
Formaat en scrollen
Kan in elke richting scrollen
Formaat en scrollen
Kolom horizontaal van formaat wijzigen
Formaat en scrollen
Rij verticaal van formaat wijzigen
Formaat en scrollen
De bovenrand verplaatsen
Formaat en scrollen
De rechterrand verplaatsen
Formaat en scrollen
De onderrand verplaatsen
Formaat en scrollen
De linkerrand verplaatsen
Formaat en scrollen
De hoek rechtsboven verplaatsen
Formaat en scrollen
De hoek linksboven verplaatsen
Formaat en scrollen
De hoek rechtsonder verplaatsen
Formaat en scrollen
De hoek linksonder verplaatsen
Formaat en scrollen
Naar links of rechts van formaat wijzigen
Formaat en scrollen
Naar boven of beneden van formaat wijzigen
Formaat en scrollen
Langs de stijgende diagonaal van formaat wijzigen
Formaat en scrollen
Langs de dalende diagonaal van formaat wijzigen
Zoomen
Kan inzoomen
Zoomen
Kan uitzoomen
Eigen cursor met hotspot en fallback
Inline SVG-ringcursor gecentreerd op de hotspot
De hotspot 12 12 legt de klik in het midden van de ring. crosshair wordt gebruikt als de afbeelding niet wordt geaccepteerd.
Uitgeschakeld, slepen en formaat wijzigen
Cursors die bij de interactie passen
Beweeg over elk element. De versleepbare kaart schakelt over naar grabbing zolang de muisknop is ingedrukt.
opacity vs visibility vs rgba
Kiezen hoe u vervaagt
Techniek
Geldt voor kinderen?
Nog klikbaar?
Vloeiend te animeren?
Tailwind
opacity: 0.5
Ja, alles binnenin
Ja
Ja
visibility: hidden
Ja (kinderen kunnen zich weer aanmelden)
Nee
Schakelt direct om
background: rgb(0 0 0 / 0.5)
Nee, alleen die laag
Ja
Ja
bg-black/50
color: rgb(17 17 17 / 0.6)
Nee, alleen de tekst
Ja
Ja
text-black/60
Opacity op het hele element naast een doorschijnende achtergrond
De linkerbanner vervaagt de tekst samen met het vak. De rechter houdt scherpe tekst boven een doorzichtige achtergrond.
De browser beslist op basis van de context
De standaardpijl van het platform
Er wordt geen cursor getekend
Er is een contextmenu beschikbaar
Er is hulp beschikbaar
Een link of klikbaar element
Bezig, maar u kunt nog steeds interacteren
Bezig, interactie kan nog niet
Een of meer tabelcellen kunnen worden geselecteerd