Share
I dette raske tipset lærer vi hvordan du tilpasser markørutseendet med CSS. Vi endrer markøren vår til piler for å gjøre det enklere å navigere i en lysbildefremvisning. For bedre å forstå det, går vi gjennom to separate eksempler.
Merk: Målet med denne artikkelen er ikke å utvide forsiktig markør eiendomens syntaks. For en grundigere undersøkelse, sørg for å sjekke ut ressursene på slutten av opplæringen.
For det første eksemplet, diskuterer vi hvordan du endrer markørbildet, avhengig av museposisjonen.
Her er den demo vi skal bygge i handling:
Vi starter med et enkelt bilde:
Deretter definerer vi to CSS-klasser som holder markørbildene:
.markør-prev cursor: url (cursor-prev.cur), auto; / * IE & Kant * / markør: url (cursor-prev.svg) 16 16, auto; / * Rest browsere * / .markør-neste markør: url (cursor-next.cur), auto; / * IE & Kant * / markør: url (cursor-next.svg) 16 16, auto; / * Rest nettlesere * /
Legg merke til at for hver regel angir vi to markørdeklarasjoner. Den første erklæringen for hver regel retter seg mot Microsofts nettlesere, mens den andre er rettet mot andre nettlesere. Alle verdier peker på et bilde, med auto søkeord verdi som en tilbakebetaling.
Det er verdt å nevne at vi kan spesifisere mer enn en egendefinert nettadresse eller et bilde. En nettleser vil prøve å laste dem basert på ordren som er definert i verdiene. Med andre ord vil det først forsøke å laste det første bildet. Hvis bildet ikke er tilgjengelig av en eller annen grunn, vil den prøve å laste den andre, og så videre. Til slutt, hvis ingen av bildene eksisterer, vil fallback søkeordet bli brukt.
Før vi går videre, la oss markere noen nåværende begrensninger (også i henhold til mine tester) og forklare hvorfor vi setter to separate erklæringer:
Når alle sideaktiver er klare, vil i det funksjonen utføres.
Innenfor den funksjonen henter vi først bildebredden.
Deretter gjør vi hver gang vi svinger over bildet, følgende ting:
Accentsconagua
markør neste klasse, ellers markør prev klassen er lagt til.Koden som er ansvarlig for all denne oppførselen, er som følger:
window.addEventListener ("load", init); funksjon init () const img = document.querySelector ("img"); const width = img.getBoundingClientRect (); const halfImgWidth = width / 2; img.addEventListener ("mousemove", funksjon (e) const xPos = e.pageX - img.offsetLeft; this.classList.remove ("markør-prev", "cursor-next"), hvis (xPos> halfImgWidth) this.classList.add ("cursor-next"); else this.classList.add ("cursor-prev");); For det andre eksempelet bruker vi demoen som ble bygget i et tidligere innlegg. Ta en titt:
Her ser plasseringen og utseendet til navigasjonspilene ut slik:
La oss tilpasse dem for å gjøre det enklere å navigere. Hver av pilene skal dekke halvparten av karusellbredden, og høyden deres skal være lik karusellhøyden. I tillegg vil vi dra nytte av markør egenskap for å sette pilene 'ikoner.
Her er den nødvendige CSS:
.ugle-karusell .owl-nav [klasse * = ugle-] posisjon: absolutt; topp: 0; bunn: 0; bredde: 50%; margin: 0; .øll-karusell .owl-nav .owl-prev left: 0; markør: url (markør-prev.cur), flytte; markør: url (cursor-prev.svg) 16 16, flytt; .øll-karusell .owl-nav.owl-next right: 0; markør: url (cursor-next.cur), flytte; markør: url (cursor-next.svg) 16 16, flytt; .-karusell .owl-nav svg display: none;
Legg merke til at markørbildene kommer fra vårt tidligere eksempel. Den eneste forskjellen er at vi spesifiserer bevege seg søkeord verdi som en tilbakebetaling i tilfelle det tilknyttede bildet ikke kan lastes inn.
Her er resultatet:
Denne teknikken fungerer bra i vårt eksempel, bortsett fra en ting. Navigasjonspilene er stablet over lysbildetes tekst, slik at vi ikke kan klikke på handlings-knappene.
Normalt kan en enkel løsning være å legge til en positiv z-indeks til den teksten (og gi den stilling: relativ). Imidlertid vil denne løsningen ikke fungere fordi teksten og pilene er i forskjellige stablingskontekster (bruk nettleserinspektøren for å se den).
Igjen, det problemet oppstår for vår demo. I prosjektene dine kan strukturen variere (for eksempel har du bare bilder eller teksten er under bildet), og du kan ikke møte dette problemet. I tillegg vil du sannsynligvis bruke en annen karusell med en annen markering.
I alle fall er en måte å løse dette problemet på via JavaScript. Så hver gang den egendefinerte markøren ligger innenfor grensene til målknappen / teksten, får den tilhørende pilen en negativ z-indeks eller forsvinner.
Prøv å finne ut denne løsningen selv, og legg inn din løsning i kommentarene!
I dette raske tipset dekket vi hvordan å manipulere markørutseendet med CSS. Som vi så, kan dette være utfordrende fordi ikke alle nettlesere støtter samme syntaks, men ved å legge til stiler til markøren, kan vi forbedre brukeropplevelsen.
markør eiendom i CSS Grunnleggende brukergrensesnittmodul Nivå 3 (CSS3 brukergrensesnitt) 