Weboví vývojáři se na svých stránkách často setkávají s potřebou změnit standardní vzhled kurzoru. Někdy je však potřeba vrátit normální, standardní kurzor zpět. To může být nutné, když uživatel opustí web, nebo na konkrétní stránce není vyžadován žádný konkrétní návrh kurzoru. Jak ale vrátit standardní kurzor na webu? V tomto článku vám o tom podrobně povíme.
Pro začátek stojí za zmínku, že změna kurzoru na webové stránce se provádí pomocí stylů CSS. Tradičně, když umístíte kurzor na interaktivní prvky webu, jeho vzhled se změní na ruku nebo jakoukoli jinou ikonu. Chcete-li však kurzor vrátit do svého standardního vzhledu, budete potřebovat jednoduchý CSS kód.
Do souboru stylů musíte přidat následující kód:
Tento kód označuje prohlížeči, že pro veškerý obsah těla musí být použit standardní kurzor. Kurzor na vašem webu se tak vrátí k běžnému vzhledu, jaký má ve výchozím nastavení.
Pamatujte, že pokud jste dříve používali různé vlastní kurzory pro jednotlivé položky na webu, budou po použití tohoto CSS kódu také nahrazeny standardním kurzorem. Před přidáním výše uvedeného kódu se proto ujistěte, že opravdu potřebujete vrátit kurzor zpět k jeho obvyklému zobrazení na celé stránce.
Proč se kurzor může na webu změnit?
Kurzor se také může měnit v závislosti na aktivitě uživatele na webu. Například když přejedete na textové pole nebo na tlačítko odeslat formulář, kurzor se může změnit na svislou čáru nebo na ruku s ukazováčkem, aby vám naznačil možnost zadávání dat nebo provádění akce.
Někdy se kurzor může na webu změnit kvůli vyskakovacím oknům nebo JavaScript skript, které udávají vlastnosti kurzoru. Například při najetí na obrázek může skript způsobit změnu kurzoru na Lupě pro zvětšení obrázku nebo na tužku pro kreslení na pozadí.
V některých případech se však kurzor může bez zjevného důvodu změnit. Může to být způsobeno chybami v označování nebo skriptech webu. V takových případech je třeba přijmout vhodná opatření, aby se vrátil standardní kurzor a zajistil uživatelskou přívětivost webu.
Jak určíte aktuální kurzor na webu?
K určení aktuálního kurzoru na webu lze použít JavaScript. K tomu je třeba použít obslužnou rutinu události mousemove na položku, na které chcete sledovat kurzor.
Ve zpracovateli události mousemove lze pomocí vlastností clientX a clientY objektu události získat souřadnice kurzoru. Pomocí podmíněných operátorů je pak možné určit, zda je kurzor v dané oblasti a změnit styl prvku podle aktuálního kurzoru.
Chcete-li například zjistit, že kurzor je v oblasti prvku s id My-element, můžete použít následující kód:
const element = document.getElementById('my-element');element.addEventListener('mousemove', function(event) element.offsetLeft && cursorX < element.offsetLeft + element.offsetWidth &&cursorY >element.offsetTop && cursorY < element.offsetTop + element.offsetHeight) else >);V tomto příkladu, pokud je kurzor uvnitř položky s id My-element, bude jeho styl kurzoru změněn na 'pointer' (standardní kurzor s obrázkem ukazatele), jinak bude styl kurzoru resetován na výchozí hodnotu ('default').
Jak mohu vrátit standardní kurzor na webu bez programování?
Pokud nejste obeznámeni s programováním a nechcete používat složité metody k vrácení standardního kurzoru na svém webu, existuje několik jednoduchých způsobů, jak to udělat bez problémů.
Prvním způsobem je použití CSS. K tomu budete muset přidat následující kód do sekce dokumentu HTML:
body
Tímto způsobem nastavíte vlastnost cursor pro prvek body na hodnotu "auto", což znamená, že prohlížeč použije standardní kurzor definovaný operačním systémem.
Druhým způsobem je použití atributu style ve spojení se značkou . Do tagu je třeba přidat následující kód :
Nastavte tedy hodnotu atributu style pro značku jako "cursor: auto;" a na vašem webu se vrátí standardní kurzor.
Oba tyto způsoby vám umožňují vrátit standardní kurzor na vašem webu bez programování. Postupujte podle uvedených pokynů a užijte si výsledek!
Jak mohu vrátit standardní kurzor na webu pomocí CSS?
Pokud chcete vrátit standardní kurzor na vašem webu, můžete k tomu použít CSS. K tomu budete muset do souboru stylů přidat malý kód CSS.
Chcete-li vrátit standardní kurzor, můžete použít vlastnost "cursor" s hodnotou "auto". Například:
Příklad:
Tuto vlastnost můžete použít na jakoukoli položku na vašem webu, na kterou chcete vrátit standardní kurzor.
Případně můžete použít hodnotu " default "pro vlastnost"cursor". Vrátí také standardní kurzor na vašem webu. Například:
Příklad:
Kromě těchto dvou hodnot poskytuje CSS také další možnosti pro vlastnost "cursor", jako je "pointer" (ukazatel), "crosshair" (zaměřovač) atd.
Nyní víte, jak získat zpět standardní kurzor na webu pomocí CSS. Nezapomeňte uložit své změny a aktualizovat svůj web, abyste viděli výsledky.