Share
În acest sfat rapid, vom învăța cum să personalizăm aspectul cursorului cu CSS. Vom schimba cursorul în săgeți pentru a facilita navigarea într-o prezentare de diapozitive. Pentru ao înțelege mai bine, vom trece prin două exemple separate.
Notă: scopul acestui articol nu este de a acoperi în mod exhaustiv cursor sintaxa proprietății. Pentru o examinare mai amănunțită, asigurați-vă că verificați resursele de la sfârșitul tutorialului.
Pentru primul exemplu, vom discuta despre schimbarea imaginii cursorului în funcție de poziția mouse-ului.
Iată demo-ul pe care îl vom construi în acțiune:
Începem cu o imagine simplă:
Apoi, definim două clase CSS care dețin imaginile cursorului:
.cursor-prev cursor: url (cursor-prev.cur), auto; / * IE & Edge * / cursor: url (cursor-prev.svg) 16 16, auto; / * Restul browserelor * / .cursor-next cursor: url (cursor-next.cur), auto; / * IE & Edge * / cursor: url (cursor-next.svg) 16 16, auto; / * Restul browserelor * /
Observați că pentru fiecare regulă specificăm două declarații de cursor. Prima declarație a fiecărei reguli vizează browser-ele Microsoft, iar cea de-a doua vizează alte browsere. Toate valorile indică o imagine, cu auto ca valoare de rezervă.
Merită menționat faptul că putem specifica mai multe adrese URL sau imagini personalizate. Un browser va încerca să le încarce pe baza ordinii definite în valori. Cu alte cuvinte, inițial va încerca să se încarce prima imagine. Dacă imaginea nu este disponibilă dintr-un anumit motiv, ea va încerca să încarce a doua imagine și așa mai departe. În cele din urmă, dacă niciuna dintre imagini nu există, se va folosi cuvântul cheie de rezervă.
Înainte de a merge mai departe, să evidențiem câteva limitări curente (și în funcție de testele mele) și să explicăm de ce am stabilit două declarații separate:
Când toate materialele paginii sunt gata, init funcția este executată.
În interiorul acestei funcții, recuperăm mai întâi lățimea imaginii.
Apoi, de fiecare dată când plasăm cursorul peste imagine, facem următoarele lucruri:
Accentsconagua
-Cursor următor clasa, în caz contrar cursor-prev clasa este adăugată.Codul responsabil pentru acest comportament este următorul:
window.addEventListener ("încărcare", init); funcția init () const img = document.querySelector ("img"); const width = img.getBoundingClientRect (); const jumătateImgWidth = lățime / 2; img.addEventListener ("mousemove", funcția (e) const xPos = e.pageX - img.offsetLeft; this.classList.remove ("cursor-prev" this.classList.add ("cursor-next"); altceva this.classList.add ("cursor-prev");); Pentru al doilea exemplu, vom folosi demo-ul construit într-o postare anterioară. Aruncati o privire:
Aici, poziția și aspectul săgeților de navigare arată astfel:
Să le personalizăm pentru o navigare mai ușoară. Fiecare dintre săgeți trebuie să acopere jumătate din lățimea caruselului și înălțimea lor ar trebui să fie egală cu înălțimea caruselului. În plus, vom profita de cursor proprietate pentru a seta icoanele săgeților.
Iată CSS-ul cerut:
.owl-carousel .owl-nav [clasa * = owl-] poziție: absolută; top: 0; fund: 0; lățime: 50%; marja: 0; carusel .owl-nav .owl-prev stânga: 0; cursor: url (cursor-prev.cur), mutați; cursor: url (cursor-prev.svg) 16 16, mutați; .carusel .owl-nav .owl-next dreapta: 0; cursor: url (cursor-next.cur), mutați; cursor: url (cursor-next.svg) 16 16, mutați; .carusel .owl-nav svg display: nici unul;
Observați că imaginile cursor provin din exemplul nostru anterior. Singura diferență este că specificăm mișcare valoarea cheie ca rezervă în cazul în care imaginea asociată nu poate fi încărcată.
Iată rezultatul:
Această tehnică funcționează bine în exemplul nostru, în afară de un singur lucru. Săgețile de navigare sunt stivuite deasupra textului diapozitivelor, ceea ce ne împiedică să facem clic pe butoanele de chemare la acțiune.
În mod normal, o soluție simplă ar putea fi adăugarea unui rezultat pozitiv z-index la acel text (și dați-i poziție: relativă). Cu toate acestea, această soluție nu va funcționa deoarece textul și săgețile sunt în diferite contexte de stivuire (utilizați inspectorul de browser pentru ao vedea).
Din nou, problema apare pentru demo-ul nostru. În proiectele dvs., structura dvs. poate diferi (de exemplu, aveți doar imagini sau textul este sub imagine) și este posibil să nu vă confruntați cu această problemă. În plus, probabil veți folosi un alt carusel cu un marcaj diferit.
În orice caz, o modalitate de a rezolva problema este via JavaScript. Deci, de fiecare dată când cursorul personalizat se află în limitele butonului / textului țintă, săgeata asociată primește un negativ z-index sau dispare.
Încercați să vă dați seama acest remediu și postați-vă soluția în comentarii!
În acest sfat rapid, am abordat cum să manipulam aspectul cursorului cu CSS. După cum am văzut, acest lucru poate fi dificil deoarece nu toate browserele acceptă aceeași sintaxă, dar prin adăugarea de stiluri către cursor putem îmbunătăți experiența utilizatorului.
cursor proprietate în Modul de bază de interfață utilizator CSS Nivel 3 (CSS3 UI) 