Il cursore indica la posizione sullo schermo in cui l'utente può fare clic o immettere il testo. Ci possono essere diversi cursori utilizzati per diversi componenti del sito Web. Uno sviluppatore deve assicurarsi che i cursori utilizzati nell'applicazione debbano essere attraenti. Ad esempio, un cursore della mano puntato può essere utilizzato sul pulsante su mouse hover. L'indicatore di testo (riga di lampeggiante) viene utilizzato nella casella di testo in cui deve essere inserito il testo.
Esistono diversi stili di cursore in CSS utilizzati semplicemente specificando il valore della proprietà del cursore. Tuttavia, uno sviluppatore può creare un cursore personalizzato utilizzando CSS.
Questa guida allo studio fornirà:
Cursore CSS
CSS cursore personalizzato
Prima di imbattersi nell'argomento, vediamo alcune forme del cursore CSS con un esempio pratico.
Cursore CSS
Il CSS "cursore"La proprietà ha valori diversi, come un puntatore, nessuno, progresso e altro ancora. Creiamo una tabella che contiene righe su cui verranno visualizzati diversi cursori su mouse.
Esempio: creazione di una tabella che rappresenta diversi cursori CSS in HTML
Innanzitutto, aggiungi il
elemento in html. All'interno di questo elemento:
IL
Il tag verrà utilizzato per creare righe.
La prima riga contiene le intestazioni.
Questi titoli sono specificati utilizzando il
tag. Altro
I tag ne contengono due
tag per popolare le colonne con i dati.
Il secondo
Tag rappresenta gli elementi dei pulsanti applicati con un CSS "cursore"Proprietà con valori diversi.
Di seguito è riportato il codice HTML per lo scenario sopra:
Selettore del cursore CSS
stile cursore
Cursore: puntatore
Cursore: progresso
Cursore: non tollerato
Cursore: nessuno
Cursore: muoversi
Cursore: afferrare
Cursore: copia
Cursore: Col-riso
Cursore: risoluzione di righe
Cursore: testo
Il codice sopra genere genererà il seguente risultato:
Nella prossima sezione, applicheremo diversi stili agli elementi HTML.
Tutti gli elementi HTML sono applicati con gli stili CSS spiegati di seguito:
"imbottitura"Proprietà con"0"Il valore non include spazio attorno al contenuto dell'elemento.
"margine"Proprietà con"0"Il valore non aggiunge spazio al di fuori di ciascuno degli elementi.
"famiglia di font"Alla proprietà viene assegnato un valore"Arial, Helvetica, sans-serif". L'elenco degli stili di carattere viene dato per garantire se il primo stile non è supportato dal browser, devono essere applicati altri stili.
L'elemento della tabella HTML viene applicato con le proprietà CSS descritte di seguito:
"confineLa proprietà "è impostata con il valore"1px Solid Gainsboro"Che rappresenta rispettivamente la larghezza del bordo, lo stile del bordo e il colore del bordo.
"margine"La proprietà si comporta come specificato sopra.
Elemento "TD" di stile
td Testo-align: centro;
IL
L'elemento viene applicato con la proprietà "allineamento"Con il valore"centro". Allinea il testo della colonna al centro.
L'elemento pulsante utilizzato nel codice HTML sopra è disegnato con nuove proprietà CSS che sono spiegate di seguito:
"colore di sfondo"Specifica il colore sullo sfondo dell'elemento.
"imbottitura"Con i valori assegnati come"10px 10px"Aggiunge spazio di 10px al fondo superiore e 10px ai lati a sinistra a destra degli articoli dell'elemento.
"colore"Regola il colore del carattere dell'elemento.
"larghezza"È la proprietà che regola la larghezza dell'elemento.
Il codice sopra genere genererà il seguente risultato:
Finora abbiamo discusso dei cursori forniti da CSS. Nella sezione imminente, l'esempio descriverà come creare un cursore personalizzato con CSS.
CSS cursore personalizzato
Gli sviluppatori devono utilizzare i cursori adatti per le loro applicazioni. I cursori dovrebbero essere resi attraenti per attirare l'attenzione degli utenti. Inoltre, il cursore personalizzato può essere creato a questo scopo.
Guarda l'esempio sotto!
Esempio: come creare cursore personalizzato con CSS?
In HTML, aggiungi due elementi Div. Uno con la classe "cerchio"E l'altro con la classe"punto".
Html
Andiamo avanti verso la sezione CSS.
Elemento "corpo" di stile
corpo Altezza: 100VH;
L'elemento corporeo del file HTML viene applicato con lo stile "altezza"Proprietà per impostare l'altezza dell'elemento.
L'elemento div con punto di classe è dotato di proprietà diverse descritte di seguito:
"colore di sfondo"La proprietà specifica il colore dello sfondo dell'elemento.
"raggio di confine"Imposta i bordi dell'elemento.
Altre proprietà funzionano come discussioni.
Il codice dato visualizzerà il seguente cursore sulla pagina Web:
Abbiamo creato il cursore usando HTML e CSS. Ora, nella prossima sezione, il codice JavaScript viene scritto per aggiungere la funzionalità richiesta al cursore.
JavaScript
Di seguito è riportata la descrizione del codice JavaScript sopra:
""Il tag è abbinato al tag, che viene utilizzato per scrivere il codice JavaScript.
"const"La parola chiave identifica che la parola chiave const seguita da una variabile non può essere riassegnata.
"documento.QuerySelector ('.cerchio')"Restituisce l'elemento DAV Circle che corrisponde al selettore specificato nel documento.
"documento.QuerySelector ('.punto')"Restituisce l'elemento Punt Div che corrisponde al selettore specificato nel documento.
"const moveCursor = (e) =>"Questa funzione specifica la funzione del cursore.
"e.Clienty"Restituisce la coordinata verticale quando è stato attivato l'evento del mouse.
"e.ClientX"Restituisce la coordinata orizzontale quando viene attivato l'evento del mouse.
"Cursorcircle.stile.trasformare"Il circolo div viene applicato con trasformazione di stile.
"cursore.stile.trasformare"Il punto Div viene applicato con trasformazione di stile.
"Translate ($ Mousex px, $ Mousey px)"Il valore della proprietà trasformata imposta le coordinate orizzontali e verticali.
"finestra.addEventListener ('Mouse', MoveCursor)"Il metodo dell'ascoltatore di eventi ascolterà il movimento del mouse. Fa parte dell'oggetto della finestra globale.
Dopo aver fornito i blocchi di codice sopra, il cursore si sposterà automaticamente sullo schermo come mostrato di seguito:
Questo è figo! Abbiamo creato un cursore personalizzato con diverse proprietà CSS.
Conclusione
Il CSS "cursore"La proprietà ha numerosi valori che indicano vari stili di cursore. Tuttavia, utilizzando gli elementi HTML e le proprietà CSS, possiamo realizzare cursori personalizzati. Quindi, il codice JavaScript è implementato per attivare la sua funzionalità. Questo studio ha dimostrato come creare cursori CSS personalizzati con un esempio pratico.
