Share
In questo suggerimento rapido, impareremo come personalizzare l'aspetto del cursore con i CSS. Cambierà il cursore in frecce per facilitare la navigazione di una presentazione. Per capirlo meglio, passeremo attraverso due esempi separati.
Nota: l'obiettivo di questo articolo non è quello di coprire esaustivamente il cursore sintassi della proprietà. Per un esame più approfondito, assicurati di controllare le risorse alla fine del tutorial.
Per il primo esempio, discuteremo come cambiare l'immagine del cursore in base alla posizione del mouse.
Ecco la demo che costruiremo in azione:
Iniziamo con un'immagine semplice:
Successivamente, definiamo due classi CSS che mantengono le immagini del cursore:
.cursor-prev cursor: url (cursor-prev.cur), auto; / * IE & Edge * / cursor: url (cursor-prev.svg) 16 16, auto; / * Rest browser * / .cursor-next cursor: url (cursor-next.cur), auto; / * IE & Edge * / cursor: url (cursor-next.svg) 16 16, auto; / * Rest browser * /
Si noti che per ogni regola vengono specificate due dichiarazioni del cursore. La prima dichiarazione di ciascuna regola riguarda i browser Microsoft, mentre la seconda riguarda altri browser. Tutti i valori puntano a un'immagine, con il auto valore della parola chiave come fallback.
Vale la pena ricordare che possiamo specificare più di un URL o un'immagine personalizzata. Un browser proverà a caricarli in base all'ordine definito nei valori. In altre parole, inizialmente proverà a caricare la prima immagine. Se quell'immagine non è disponibile per qualche motivo, proverà a caricare la seconda e così via. Infine, se nessuna delle immagini esiste, verrà utilizzata la parola chiave di fallback.
Prima di procedere, evidenziamo alcune limitazioni attuali (anche in base ai miei test) e spieghiamo perché abbiamo impostato due dichiarazioni separate:
Quando tutte le risorse della pagina sono pronte, il dentro la funzione è eseguita.
All'interno di questa funzione, prima recuperiamo la larghezza dell'immagine.
Successivamente, ogni volta che passiamo il mouse sopra l'immagine, facciamo le seguenti cose:
Accentsconagua
cursore-next classe, altrimenti il cursore-prev classe è stata aggiunta.Il codice responsabile di questo comportamento è il seguente:
window.addEventListener ("load", init); function init () const img = document.querySelector ("img"); const width = img.getBoundingClientRect (); const halfImgWidth = width / 2; img.addEventListener ("mousemove", function (e) const xPos = e.pageX - img.offsetLeft; this.classList.remove ("cursor-prev", "cursor-next"); if (xPos> halfImgWidth) this.classList.add ("cursor-next"); else this.classList.add ("cursor-prev");); Per il secondo esempio, useremo la demo costruita in un post precedente. Guarda:
Qui, la posizione e l'aspetto delle frecce di navigazione assomigliano a questo:
Personalizziamoli per facilitare la navigazione. Ciascuna delle frecce dovrebbe coprire metà della larghezza della giostra e la loro altezza dovrebbe essere uguale all'altezza del carosello. Inoltre, sfrutteremo il cursore proprietà per impostare le icone delle frecce.
Ecco il CSS richiesto:
.owl-carousel .owl-nav [class * = owl-] position: absolute; inizio: 0; fondo: 0; larghezza: 50%; margine: 0; .owl-carousel .owl-nav .owl-prev left: 0; cursore: url (cursor-prev.cur), move; cursor: url (cursor-prev.svg) 16 16, move; .owl-carousel .owl-nav .owl-next right: 0; cursore: url (cursor-next.cur), move; cursor: url (cursor-next.svg) 16 16, move; .owl-carousel .owl-nav svg display: none;
Si noti che le immagini del cursore provengono dal nostro esempio precedente. L'unica differenza è che specifichiamo il mossa valore della parola chiave come fallback nel caso in cui l'immagine associata non possa essere caricata.
Ecco il risultato:
Questa tecnica funziona bene nel nostro esempio, a parte una cosa. Le frecce di navigazione sono impilate sopra il testo delle diapositive, impedendoci di fare clic sui pulsanti di invito all'azione.
Normalmente, una semplice soluzione potrebbe essere quella di aggiungere un positivo z-index a quel testo (e darlo posizione: relativa). Tuttavia, questa soluzione non funzionerà perché il testo e le frecce si trovano in diversi contesti di impilamento (usa l'ispettore del browser per vederlo).
Ancora una volta, questo problema si verifica per la nostra demo. Nei tuoi progetti, la tua struttura potrebbe essere diversa (ad esempio, hai solo immagini o il testo è sotto l'immagine) e potresti non affrontare questo problema. Inoltre, probabilmente utilizzerai un altro carosello con un markup diverso.
In ogni caso, un modo per risolvere questo problema è tramite JavaScript. Pertanto, ogni volta che il cursore personalizzato si trova all'interno dei limiti del pulsante / testo di destinazione, la freccia associata riceve un segno negativo z-index o scompare.
Cerca di capire da solo questa correzione e pubblica la tua soluzione nei commenti!
In questo suggerimento rapido, abbiamo spiegato come manipolare l'aspetto del cursore con i CSS. Come abbiamo visto, questo può essere difficile in quanto non tutti i browser supportano la stessa sintassi, ma aggiungendo stili al cursore, siamo in grado di migliorare l'esperienza dell'utente.
cursore proprietà nel Livello 3 dell'interfaccia utente di base CSS (interfaccia utente CSS3) 