Share
I det här snabba tipset lär vi oss hur du anpassar markörens utseende med CSS. Vi ändrar markören till pilar för att göra det enklare att navigera i ett bildspel. För att bättre förstå det går vi igenom två separata exempel.
Notera: Målet med denna artikel är inte att uttömmande täcka markören egenskapens syntax. För en noggrannare granskning, var noga med att kolla in resurserna i slutet av handledningen.
För det första exemplet diskuterar vi hur du ändrar markörens bild beroende på muspositionen.
Här är den demo som vi ska bygga i aktion:
Vi börjar med en enkel bild:
Därefter definierar vi två CSS-klasser som håller markörsbilderna:
.cursor-prev cursor: url (cursor-prev.cur), auto; / * IE & Edge * / markör: url (cursor-prev.svg) 16 16, auto; / * Vila webbläsare * / .markör-nästa markör: url (cursor-next.cur), auto; / * IE & Edge * / cursor: url (cursor-next.svg) 16 16, auto; / * Vila webbläsare * /
Observera att för varje regel specificerar vi två markördeklarationer. Den första deklarationen för varje regel riktar sig till Microsofts webbläsare, medan den andra är inriktad på andra webbläsare. Alla värden pekar på en bild, med bil nyckelordvärde som en återgång.
Det är värt att nämna att vi kan ange mer än en anpassad webbadress eller bild. En webbläsare försöker ladda dem baserat på den ordning som definieras i värdena. Med andra ord kommer det först att försöka ladda den första bilden. Om den bilden inte är tillgänglig av någon anledning försöker den ladda den andra och så vidare. Slutligen, om ingen av bilderna finns, kommer backback-sökordet att användas.
Innan vi går vidare, låt oss markera några nuvarande begränsningar (även enligt mina tester) och förklara varför vi ställer in två separata deklarationer:
När alla sidtillgångar är klara, är i det funktionen exekveras.
Inuti den funktionen hämtar vi först bildbredden.
Nästa gång vi svävar över bilden gör vi följande saker:
Accentsconagua
markör-next klass, annars markör-prev klassen läggs till.Koden som är ansvarig för allt detta beteende är som följer:
window.addEventListener ("load", init); funktion init () const img = document.querySelector ("img"); const width = img.getBoundingClientRect (); const halfImgWidth = width / 2; img.addEventListener ("mousemove", funktion (e) const xPos = e.pageX - img.offsetLeft; this.classList.remove ("cursor-prev", "cursor-next"), om (xPos> halfImgWidth) this.classList.add ("cursor-next"); annars this.classList.add ("cursor-prev");); För det andra exemplet använder vi demoen som byggdes i ett tidigare inlägg. Ta en titt:
Här ser positionen och utseendet på navigeringspilen ut så här:
Låt oss anpassa dem för att underlätta navigering. Var och en av pilarna ska täcka hälften av karusellbredden, och deras höjd ska vara lika med karusellhöjden. Plus, vi kommer att dra nytta av markören egenskap för att ställa in pilarnas ikoner.
Här är den obligatoriska CSS:
.uggla-carousel .owl-nav [class * = ugle-] position: absolute; topp: 0; botten: 0; bredd: 50%; marginal: 0; .ö-carousel .owl-nav .owl-prev left: 0; markör: url (markör-prev.cur), flytta; markör: url (markör-prev.svg) 16 16, flytta; .ö-carousel .owl-nav.owl-next right: 0; markör: url (cursor-next.cur), flytta; markör: url (cursor-next.svg) 16 16, flytta; .Wall-carousel .owl-nav svg display: none;
Observera att markörbilderna kommer från vårt tidigare exempel. Den enda skillnaden är att vi anger flytta nyckelordvärde som en återgång om den associerade bilden inte kan laddas.
Här är resultatet:
Denna teknik fungerar bra i vårt exempel, förutom en sak. Navigationspilen staplas ovanför diabildens text, vilket hindrar oss från att kunna klicka på knapparna för samtalsknappen.
Normalt kan en enkel lösning vara att lägga till en positiv z-index till den texten (och ge den position: relativ). Denna lösning fungerar emellertid inte eftersom texten och pilarna ligger i olika staplingskontekster (använd webbläsarens inspektör för att se den).
Återigen uppstår det problemet för vår demo. I dina projekt kan din struktur skilja sig från (till exempel har du bara bilder eller texten ligger under bilden) och du kanske inte står inför problemet. Dessutom använder du förmodligen en annan karusell med en annan markering.
I vilket fall som helst är ett sätt att lösa det problemet via JavaScript. Så, varje gång den anpassade markören ligger inom gränserna för målknappen / texten, får den associerade pilen en negativ z-index eller försvinner.
Försök att räkna ut denna fixa dig själv och lägg upp din lösning i kommentarerna!
I det här snabba tipset täckte vi hur man kan manipulera markörens utseende med CSS. Som vi såg kan detta vara utmanande eftersom inte alla webbläsare stöder samma syntax, men genom att lägga till stilar till markören kan vi förbättra användarupplevelsen.
markören egenskap i CSS Basic User Interface Module Level 3 (CSS3 UI) 