Che cosa sono i cursori nei CSS?
Ogni giorno utilizziamo già cursori personalizzati. Questa interazione è resa possibile utilizzando cursori modificati, ad esempio quando si passa sopra i pulsanti, il cursore del puntatore si trasforma in una mano o quando si passa sopra il testo e il cursore si trasforma in un cursore di testo.
I cursori, tuttavia, possono anche essere utilizzati per offrire ai nostri utenti varie ulteriori opportunità creative.
Dovremmo essere consapevoli che i CSS dispongono già di cursori predefiniti per varie azioni eseguite spesso prima di iniziare a sviluppare i nostri cursori personalizzati.
Questi cursori forniscono opzioni per l'azione nel punto preciso su cui stai passando il mouse. Gli esempi includono cursori che indicano che è necessario fare clic sui collegamenti, trascinare e rilasciare elementi, ingrandire e ridurre gli oggetti e altro ancora.
Utilizza la proprietà cursore CSS per descrivere il tipo di cursore che desideri.
Proprietà del cursore CSS
Possiamo specificare il tipo di cursore che dovrebbe essere mostrato all'utente utilizzando la proprietà cursore CSS.
L'utilizzo delle foto come pulsanti di invio nei moduli è un'utile applicazione di questa funzionalità. Per impostazione predefinita, quando il cursore si trova sopra un collegamento viene visualizzata una mano al posto del puntatore. Tuttavia, il pulsante di invio di un modulo non ne determina la modifica. Questo serve come segnale visivo che l'immagine è cliccabile ogni volta che qualcuno passa sopra un'immagine che è un pulsante di invio.
Questa proprietà è specificata da zero o più valori separati da virgole, seguiti da un valore di parola chiave come richiesto e ciascuno farà riferimento al file di immagine.
Sintassi
cursor: value;
Valori delle proprietà
| Auto: | L'impostazione predefinita per questo attributo consiste nel posizionare il cursore.
| Alias: | Questo attributo viene utilizzato per mostrare l'indicatore relativo alla creazione del cursore.
| Scorrimento completo: | Il cursore in questo attributo denota lo scorrimento.
| Cellula: | Il cursore in questa proprietà indica che è attualmente selezionata una cella o un gruppo di celle.
| Menù contestuale: | Il cursore in questo attributo mostra la presenza di un menu contestuale.
| Ridimensionamento colore: | Quando il cursore si trova sopra una colonna in questa proprietà, è possibile ridimensionarla orizzontalmente.
| Copia: | Il cursore in questa proprietà indica che qualcosa deve essere copiato.
| Mirino: | Il cursore appare come un mirino in questo attributo.
| Predefinito: | Il cursore predefinito.
| Ridimensionamento elettronico: | Il cursore in questo attributo indica che il bordo destro di una casella deve essere spostato.
| Ridimensiona: | Il cursore in questo attributo rappresenta un cursore di ridimensionamento bidirezionale.
| Aiuto: | In questa proprietà il cursore indica che l'assistenza è accessibile.
| Mossa: | Il puntatore in questa proprietà implica che qualcosa deve essere spostato
| . n-ridimensionamento: | Quando si utilizza la proprietà n-resize, il puntatore mostra che il limite superiore di una casella deve essere spostato.
| Cosa ridimensionare: | Con questa proprietà, il cursore mostra che il bordo di una casella deve essere spostato verso destra e verso l'alto.
| Nuovo ridimensionamento: | Il cursore di ridimensionamento bidirezionale è indicato da questo attributo.
| Ns-ridimensionamento: | Un cursore di ridimensionamento bidirezionale è indicato dall'attributo ns-resize.
| Nw-ridimensiona: | Il cursore in questo attributo mostra che i bordi superiore e inferiore di una casella devono essere spostati verso l'alto e verso sinistra.
| Ridimensionamento del naso: | Il cursore di ridimensionamento bidirezionale è indicato da questo attributo.
| Nessuna goccia: | Il cursore in questo attributo indica che l'oggetto estratto non può essere scaricato in questa posizione.
| Nessuno: | In base a questo attributo non viene visualizzato un cursore per l'elemento.
| Non autorizzato: | Il cursore in questa proprietà indica che l'azione richiesta non verrà eseguita.
| Puntatore: | Il cursore in questa proprietà funge da puntatore e visualizza l'avanzamento del collegamento.
| Progresso: | Il cursore in questo attributo mostra che il programma è attivo.
| Ridimensionamento riga: | Il cursore mostra che questa funzione consente il ridimensionamento della riga verticale.
| Ridimensionamento S: | Quando si utilizza questa proprietà, il puntatore indica che il limite inferiore di una casella deve essere abbassato.
| Ridimensiona: | Il cursore in questo attributo indica che il bordo di una casella deve essere spostato a destra e verso il basso.
| Ridimensiona SW: | Il cursore in questo attributo indica che i bordi sinistro e inferiore di una casella devono essere spostati.
| Testo: | Il cursore in questo attributo denota il testo che può essere scelto.
| URL: | Questa proprietà contiene un elenco di URL di cursori personalizzati separati da virgole e un cursore generico alla fine dell'elenco.
| Testo verticale: | Il cursore in questo attributo mostra le possibili selezioni del testo verticale.
| Ridimensionamento W: | Quando si utilizza questa proprietà, il puntatore indica che il bordo sinistro di una casella deve essere spostato.
Esempio
Questo esempio mostra come utilizzare la proprietà del cursore. Il programma è occupato poiché il valore della proprietà del cursore è impostato su attesa.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Produzione
Possiamo specificare il tipo di cursore che dovrebbe essere mostrato all'utente utilizzando la proprietà cursore CSS. L'utilizzo delle foto come pulsanti di invio nei moduli è un'utile applicazione di questa funzionalità. Per impostazione predefinita, quando il cursore si trova sopra un collegamento viene visualizzata una mano al posto del puntatore.
