Share
In deze snelle tip leren we hoe u de cursor kunt aanpassen met CSS. We zullen onze cursor veranderen in pijlen om het navigeren door een diavoorstelling gemakkelijker te maken. Om het beter te begrijpen, zullen we twee afzonderlijke voorbeelden bekijken.
Notitie: het doel van dit artikel is niet om de cursor syntaxis van de eigenschap. Voor een grondiger onderzoek, moet u de bronnen aan het einde van de zelfstudie bekijken.
Voor het eerste voorbeeld bespreken we hoe de cursorafbeelding kan worden gewijzigd, afhankelijk van de positie van de muis.
Dit is de demo die we gaan bouwen in actie:
We beginnen met een eenvoudige afbeelding:
Vervolgens definiëren we twee CSS-klassen die de cursorafbeeldingen bevatten:
.cursor-vorige cursor: url (cursor-prev.cur), auto; / * IE & Edge * / cursor: url (cursor-prev.svg) 16 16, auto; / * Rest-browsers * / .cursor-volgende cursor: url (cursor-volgende.cur), auto; / * IE & Edge * / cursor: url (cursor-next.svg) 16 16, auto; / * Rest-browsers * /
Merk op dat we voor elke regel twee cursorverklaringen opgeven. De eerste verklaring van elke regel is gericht op Microsoft-browsers, terwijl de tweede gericht is op andere browsers. Alle waarden wijzen naar een afbeelding, met de auto sleutelwoordwaarde als terugval.
Vermeldenswaardig is dat we meer dan één aangepaste URL of afbeelding kunnen specificeren. Een browser zal proberen ze te laden op basis van de volgorde die in de waarden is gedefinieerd. Met andere woorden, in eerste instantie zal het proberen de eerste afbeelding te laden. Als die afbeelding om de een of andere reden niet beschikbaar is, probeert deze de tweede te laden, enzovoort. Als ten slotte geen van de afbeeldingen bestaat, wordt het fallback-sleutelwoord gebruikt.
Voordat we verdergaan, laten we een paar huidige beperkingen (ook volgens mijn tests) benadrukken en uitleggen waarom we twee afzonderlijke verklaringen hebben opgesteld:
Wanneer alle pagina-items gereed zijn, de in het functie wordt uitgevoerd.
Binnen die functie halen we eerst de beeldbreedte op.
Vervolgens doen we elke keer dat we over de afbeelding zweven, de volgende dingen:
Accentsconagua
cursor-next klasse, anders de cursor-prev klas is toegevoegd.De code die verantwoordelijk is voor al dit gedrag is als volgt:
window.addEventListener ("load", init); function init () const img = document.querySelector ("img"); const width = img.getBoundingClientRect (); const halfImgWidth = width / 2; img.addEventListener ("mousemove", functie (e) const xPos = e.pageX - img.offsetLeft; this.classList.remove ("cursor-vorige", "cursor volgende"); if (xPos> halfImgWidth) this.classList.add ("cursor-next"); else this.classList.add ("cursor-vorige");); Voor het tweede voorbeeld gebruiken we de demo die in een vorige post is gebouwd. Kijk eens:
Hier zien de positie en het uiterlijk van de navigatiepijlen er als volgt uit:
Laten we ze aanpassen om de navigatie te vergemakkelijken. Elk van de pijlen moet de helft van de carrouselbreedte beslaan en hun hoogte moet gelijk zijn aan de hoogte van de carrousel. Bovendien profiteren we van de cursor eigenschap om de pictogrammen van de pijlen in te stellen.
Dit is de vereiste CSS:
.owl-carrousel .owl-nav [class * = owl-] position: absolute; boven: 0; onderkant: 0; breedte: 50%; marge: 0; .owl-carrousel .owl-nav .owl-prev left: 0; cursor: url (cursor-prev.cur), verplaatsen; cursor: url (cursor-prev.svg) 16 16, verplaatsen; .owl-carrousel .owl-nav .owl-next right: 0; cursor: url (cursor-next.cur), verplaatsen; cursor: url (cursor-next.svg) 16 16, verplaatsen; .owl-carrousel .owl-nav svg display: none;
Merk op dat de cursorbeelden afkomstig zijn van ons vorige voorbeeld. Het enige verschil is dat we het verhuizing sleutelwoordwaarde als een terugval voor het geval de bijbehorende afbeelding niet kan worden geladen.
Dit is het resultaat:
Deze techniek werkt goed in ons voorbeeld, afgezien van één ding. De navigatiepijlen zijn boven de tekst van de dia's gestapeld, waardoor we niet kunnen klikken op de call-to-action-knoppen.
Normaal gesproken zou een eenvoudige oplossing kunnen zijn om een positief toe te voegen z-index naar die tekst (en geef het positie: relatief). Deze oplossing werkt echter niet omdat de tekst en pijlen zich in verschillende stapelcontexten bevinden (gebruik de browserinspector om deze te bekijken).
Nogmaals, dat probleem doet zich voor bij onze demo. In uw projecten kan uw structuur verschillen (u heeft bijvoorbeeld alleen afbeeldingen of de tekst staat onder de afbeelding) en mogelijk krijgt u dit probleem niet. Bovendien zult u waarschijnlijk een andere carrousel met een andere opmaak gebruiken.
In ieder geval, een manier om dit probleem op te lossen is via JavaScript. Dus elke keer dat de aangepaste cursor zich binnen de grenzen van de doelknop / tekst bevindt, ontvangt de bijbehorende pijl een negatief z-index of verdwijnt.
Probeer deze oplossing zelf te achterhalen en plaats uw oplossing in de opmerkingen!
In deze snelle tip hebben we besproken hoe je de weergave van de cursor kunt manipuleren met CSS. Zoals we hebben gezien, kan dit een uitdaging zijn, omdat niet alle browsers dezelfde syntaxis ondersteunen, maar door stijlen aan de cursor toe te voegen, kunnen we de gebruikerservaring verbeteren.
cursor eigenschap in de CSS Basic User Interface Module Level 3 (CSS3 UI) 