Wat zijn cursors in CSS?
Elke dag gebruiken we al aangepaste cursors. Deze interactie wordt mogelijk gemaakt door aangepaste cursors te gebruiken, bijvoorbeeld wanneer u over knoppen beweegt, verandert de aanwijzercursor in een hand, of wanneer u over de tekst beweegt en de cursor verandert in een tekstcursor.
Cursors kunnen echter ook worden gebruikt om onze gebruikers verschillende extra creatieve mogelijkheden te bieden.
We moeten ons ervan bewust zijn dat CSS al standaardcursors heeft voor verschillende vaak uitgevoerde acties voordat we onze aangepaste cursors gaan ontwikkelen.
Deze cursors bieden actiemogelijkheden op de precieze plek waar u overheen zweeft. Voorbeelden hiervan zijn cursors die aangeven dat u op koppelingen moet klikken, elementen moet slepen en neerzetten, op objecten moet in- en uitzoomen, en meer.
Gebruik de CSS-cursoreigenschap om het gewenste type cursor te beschrijven.
CSS-cursoreigenschap
We kunnen het soort cursor specificeren dat aan de gebruiker moet worden getoond met behulp van de CSS-cursoreigenschap.
Het gebruik van foto's als verzendknoppen op formulieren is een nuttige toepassing van deze mogelijkheid. Standaard verschijnt er een hand in plaats van een aanwijzer wanneer de cursor zich boven een link bevindt. De verzendknop van een formulier zorgt er echter niet voor dat het formulier van vorm verandert. Dit dient als een visuele aanwijzing dat er op de afbeelding kan worden geklikt wanneer iemand over een afbeelding beweegt die een verzendknop is.
Deze eigenschap wordt gespecificeerd door nul of meer waarden, gescheiden door komma's, gevolgd door één trefwoordwaarde, indien vereist, en elke waarde verwijst naar het afbeeldingsbestand.
Syntaxis
cursor: value;
Eigendomswaarden
| Auto: | De standaardinstelling voor dit attribuut is het plaatsen van de cursor.
| Alias: | Dit attribuut wordt gebruikt om de creatiegerelateerde indicator van de cursor weer te geven.
| Alles scrollen: | De cursor in dit attribuut geeft scrollen aan.
| Cel: | De cursor in deze eigenschap geeft aan dat er momenteel een cel of groep cellen is gekozen.
| Contextmenu: | De cursor in dit attribuut geeft de aanwezigheid van een contextmenu aan.
| Col-formaat wijzigen: | Wanneer de cursor zich boven een kolom in deze eigenschap bevindt, kan de grootte ervan horizontaal worden gewijzigd.
| Kopiëren: | De cursor in deze eigenschap geeft aan dat er iets gekopieerd moet worden.
| Draadkruis: | De cursor verschijnt als een draadkruis in dit attribuut.
| Standaard: | De standaardcursor.
| E-formaat wijzigen: | De cursor in dit attribuut geeft aan dat de rechterrand van een vak moet worden verplaatst.
| Formaat wijzigen: | De cursor in dit attribuut vertegenwoordigt een bidirectionele cursor voor het wijzigen van de grootte.
| Hulp: | In deze eigenschap geeft de cursor aan dat hulp toegankelijk is.
| Beweging: | De aanwijzer in deze eigenschap geeft aan dat er iets moet worden verplaatst
| . n-formaat wijzigen: | Wanneer u de eigenschap n-resize gebruikt, geeft de aanwijzer aan dat de bovengrens van een kader moet worden verschoven.
| Wat-formaat wijzigen: | Met deze eigenschap geeft de cursor aan dat de rand van een doos naar rechts en naar boven moet worden verschoven.
| Nieuw formaat: | De bidirectionele formaatwijzigingscursor wordt aangegeven door dit attribuut.
| Ns-formaat wijzigen: | Een bidirectionele resize-cursor wordt aangegeven door het attribuut ns-resize.
| Nw-formaat wijzigen: | De cursor in dit attribuut geeft aan dat de boven- en onderrand van een doos naar boven en naar links moeten worden verplaatst.
| Neusgrootte wijzigen: | De bidirectionele formaatwijzigingscursor wordt aangegeven door dit attribuut.
| Geen drop: | De cursor in dit attribuut geeft aan dat het getrokken object niet op deze locatie kan worden gedumpt.
| Geen: | Er wordt geen cursor weergegeven voor het element volgens dit attribuut.
| Niet toegestaan: | De cursor in deze eigenschap geeft aan dat de gevraagde actie niet zal worden uitgevoerd.
| Wijzer: | De cursor in deze eigenschap dient als aanwijzer en geeft de voortgang van de verbinding weer.
| Voortgang: | De cursor in dit attribuut geeft aan dat het programma actief is.
| Rij-formaat wijzigen: | De cursor geeft aan dat deze functie het mogelijk maakt om de grootte van verticale rijen aan te passen.
| S-formaat wijzigen: | Wanneer u deze eigenschap gebruikt, geeft de aanwijzer aan dat de ondergrens van een vak moet worden verlaagd.
| Formaat wijzigen: | De cursor in dit attribuut geeft aan dat de rand van een kader naar rechts en naar beneden moet worden verschoven.
| SW-formaat wijzigen: | De cursor in dit attribuut geeft aan dat de linker- en onderrand van een vak moeten worden verplaatst.
| Tekst: | De cursor in dit attribuut geeft de tekst aan die kan worden gekozen.
| URL: | Deze eigenschap bevat een lijst met aangepaste cursor-URL's, gescheiden door komma's, en een algemene cursor aan het einde van de lijst.
| Verticale tekst: | De cursor in dit attribuut toont mogelijke verticale tekstselecties.
| W-formaat wijzigen: | Wanneer u deze eigenschap gebruikt, geeft de aanwijzer aan dat de linkerrand van een vak moet worden verplaatst.
Voorbeeld
Dit voorbeeld laat zien hoe u de cursoreigenschap gebruikt. Het programma is bezig omdat de waarde van de cursoreigenschap is ingesteld op wachten.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Uitvoer
We kunnen het soort cursor specificeren dat aan de gebruiker moet worden getoond met behulp van de CSS-cursoreigenschap. Het gebruik van foto's als verzendknoppen op formulieren is een nuttige toepassing van deze mogelijkheid. Standaard verschijnt er een hand in plaats van een aanwijzer wanneer de cursor zich boven een link bevindt.
