# Egérkurzor widget: áttekintés, kurzorterület és kurzortípusok

> Az Egérkurzor widget beállításai: a kurzor területe, az öt kurzortípus, az egyedi kurzorikon és az egérmozgást követő képsor.

Az **Egérkurzor** widget lecseréli a látogató egérmutatóját az oldal általad kijelölt részén: képre, szóra, körre vagy egy képsorra. Ez a fejezet a widget összes közös beállítását leírja, a hatásukat a nyilvános oldalon, és azt, hol áll le az effekt. A követő képet külön az [Egérkurzor: követő kép](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kurzor-kep/), a kurzor tárolóra és widgetre szűkítését az [Egérkurzor: tároló és widget](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kurzor-terulet/), a folyamatjelző kört az [Egérkurzor: folyamatjelző kör](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kurzor-gyuru/) fejezet írja le.

A widget a Pro bővítmény része.

## Mielőtt elkezdesz

- A widget a **The Plus Addons → Widgets** oldalon kapcsolható be: keresd meg a **Mouse Cursor** kapcsolót.
- A Pro bővítmény nélkül a widget eltűnik a szerkesztőből, és az oldal, amely már használja, kurzoreffektus és értesítés nélkül jelenik meg.
- A widget a szerkesztőben semmit sem rajzol ki. A panelen is ez áll: „Ez a widget csak a webhely nyilvános felületén működik.” A kurzort a nyilvános oldalon vagy az előnézetben nézd.
- Minden kurzoreffektus kikapcsol, ha a böngészőablak 991 képpont vagy keskenyebb. Telefonon és a legtöbb tableten ezért nem történik semmi.

## A widget bekapcsolása

1. Nyisd meg a **The Plus Addons → Widgets** oldalt.
2. Keresd meg a **Mouse Cursor** kapcsolót, és kapcsold be.
3. Szerkeszd az oldalt Elementorral, és húzd az **Egérkurzor** widgetet az oldalra.

A widget maga láthatatlan, ezért teljesen mindegy, hová húzod a tárolón belül. Csak az számít, melyik tárolóban vagy widget mellett áll.

## A kurzor területe

A **Tartalom** fülön a **Kurzor területe** dönti el, az oldal mekkora részén él az új kurzor.

| Érték | Mit fed le | Tapasztalat |
|---|---|---|
| **Törzs** | A teljes oldalt | A widget megjelöli az oldal törzsét, és a kurzor mindenhol érvényes |
| **Tároló** | Azt a tárolót, amelyben a widget áll | Az effekt addig látszik, amíg az egér a tárolón belül van, és azon kívül eltűnik |
| **Widget** | A közvetlenül a widget fölötti widgetet | Az effekt csak azon az egy widgeten látszik. Ha fölötte nincs semmi, nem jön létre semmi |
| **Oszlop** és **Szakasz** | A régi Elementor-oszlopot és -szakaszt | Tárolóalapú oldalon egyik sem lesz látható. Csak a régi szakasz-oszlop elrendezésű oldalon használd |

A **Tároló** és a **Widget** részletei az [Egérkurzor: tároló és widget](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kurzor-terulet/) fejezetben vannak.

## A kurzor típusa

A **Típus** nem legördülő menü, hanem egy képsor, öt választható képpel. A sorrend: **Kurzorikon**, **Kép követése**, **Szöveg követése**, **Követő kör**, **Egérmozgást követő kép**.

| Típus | Mit lát a látogató |
|---|---|
| **Kurzorikon** | Maga a mutató cserélődik le, beépített CSS-kurzorra vagy saját képre |
| **Kép követése** | A megszokott mutató megmarad, és egy kép követi |
| **Szöveg követése** | A megszokott mutató megmarad, és egy szó vagy kifejezés követi |
| **Követő kör** | Egy kör követi a mutatót. Három stílusa van: **Keretkurzor**, **Folyamatjelző kurzor (oldaltörzs)** és **Keverési módú kurzor** |
| **Egérmozgást követő kép** | A mutató mozgása közben képeket szór maga mögé, amelyek elhalványulnak |

### Kurzorikon

Ha a **Kurzorikon** a kiválasztott típus, az **Ikon típusa** az **Előre meghatározott** és az **Egyéni** közül választ.

![A Kurzorikon típus beállításai, előre meghatározott ikonnal](./kepek/kepek-media-kurzor-panel-ikon.webp)

*A Kurzorikon típus beállításai, előre meghatározott ikonnal* (https://minta-bolt.hu/wp-admin/post.php?post=198&action=elementor)

A képen a **Kurzor területe** **Törzs**, az **Ikon típusa** **Előre meghatározott**, a **Kiválasztás** pedig a böngésző beépített kurzorainak listája.

- Az **Előre meghatározott** értéknél a **Kiválasztás** a böngésző szokásos kurzorainak listája: például **célkereszt**, **megragadás**, **mozgatás**, **súgó**, **nagyítás**, **kicsinyítés**, **várakozás** vagy **semmi**. Az alapérték a **célkereszt**. Az effekt a teljes területen érvényes, az **Előre meghatározott** nagyítás-kurzor például a fejlécen és a szövegen is nagyítót mutat.
- Az **Egyéni** értéknél a **Kurzorikon** mezőben saját képet választhatsz. Kicsi, átlátszó hátterű képet használj. A panel .svg fájlt kér.

Bármelyiket választod, a terület minden elemén érvényes, a linkeken és a képeken is, vagyis a link szokásos mutató keze is lecserélődik.

### Egérkurzor kattintási effektusa

Az **Egérkurzor kattintási effektusa** kapcsolót bekapcsolva második kép adható, amely a linkek fölött mutatkozik a másik helyett. A név ellenére ez rámutatásra, nem kattintásra vált: amíg az egér egy `<a>` elem fölött van, a második kép látszik, máshol az első. Ha bekapcsolod a kapcsolót, de nem választasz második képet, semmi sem változik.

### A követő típusok

A **Kép követése**, a **Szöveg követése** és a **Követő kör** megtartja a látogató megszokott mutatóját, és hozzáad valamit, ami követi. Három közös beállításuk van:

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Kurzor bal oldali eltolása** | Jobbra tolja a követő elemet a mutatótól. Negatív érték balra tol. −500 és 500 között állítható | 10 px |
| **Kurzor felső eltolása** | Lefelé tolja a követő elemet a mutatótól. Negatív érték felfelé tol. −500 és 500 között állítható | 10 px |
| **Egérkurzor kattintási effektusa** | A kép vagy a szöveg cserélődik, amíg a mutató egy link fölött áll | Nem |

## Egérmozgást követő kép

Az **Egérmozgást követő kép** képeket szór a mutató mögé, ahogy mozog. A **Képlista** minden sora egy-egy kép, saját **Szélesség**, **Eltolás X** és **Eltolás Y** beállítással. Az **Elem hozzáadása** gombbal veszel fel új sort.

![Az Egérmozgást követő kép beállításai három képpel](./kepek/kepek-media-kurzor-panel-nyom.webp)

*Az Egérmozgást követő kép beállításai három képpel* (https://minta-bolt.hu/wp-admin/post.php?post=200&action=elementor)

A képen a **Képlista** három sorral, alatta az **Időtartam**, a **Távolságküszöb** és a **Húzási effektus**.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Időtartam** | Hány másodperc alatt halványul el egy-egy kép. 0,1 és 5 között állítható | 1 |
| **Távolságküszöb** | Milyen messzire kell mozdulnia a mutatónak, mielőtt a következő kép lekerül. A nagyobb szám kevesebb képet jelent. 10 és 200 képpont között állítható | 50 px |
| **Húzási effektus** | Minden képet kissé a mutató mögött kezd, abban az irányban, ahonnan jött | Kikapcsolva |

A listából a widget véletlenszerűen választ képet minden lerakáskor. Három képnél kilenc gyors egérugrás tizenhét képet hagyott az oldalon egyszerre, és három és fél másodperc mozdulatlanság után mind eltűnt. Tizenkét öt képpontos mozdítás 200-as **Távolságküszöb**nél egyet sem rakott le.

![Színes kártyák nyoma az egér mozgásvonalán](./kepek/kepek-media-kurzor-nyom.webp)

*Színes kártyák nyoma az egér mozgásvonalán* (https://minta-bolt.hu/km5-kurzor-nyom/)

A képen a kártyák az egér útját követik, a régebbiek már elhalványultak. Az **Egérmozgást követő kép** a GSAP-ot is használja.

## Stílus

A **Stílus** fül a kiválasztott típustól függ.

- **Szöveg követése**: Szöveg párnázása (alapérték 10/15/10/15 px), tipográfia, szövegszín, háttér, szegély, keretsugár és szövegdoboz-árnyék.
- **Szöveg követése, ha a terület Widget**: rövidebb szakasz, csak **Szöveg mérete** és **Szöveg színe**.
- **Követő kör**: **Normál** és **Rámutatás** fül, színekkel, körvonalvastagságokkal, **Transzformációs CSS**-sel és **Átmenet időtartama** értékkel.

## Hogyan viselkedik

- A widget a szerkesztőben semmit sem rajzol ki. Az előnézetben vagy a nyilvános oldalon nézd.
- 991 képpont szélességű ablaknál és az alatt minden kikapcsol, 992 képponttól működik. A vizsgálat egyszer, betöltéskor fut, átméretezéskor nem ismétlődik.
- A feltétel az ablak szélessége, nem az eszköz. Egy 1200 képpont széles érintőeszközön az effekt működött, egy 390 képpontos telefonon nem.
- A widget egy stíluslapot és egy szkriptet tölt be, csak azokon az oldalakon, amelyek használják. Az **Egérmozgást követő kép** GSAP-ot is igényel.

## Korlátozások

- A widget csak Pro. A Pro bővítmény nélkül eltűnik a szerkesztőből, és az oldal egyszerűen kurzoreffektus nélkül jelenik meg, értesítés nélkül.
- 991 képpont szélesség alatt nincs hatás, ezért a telefonos és tabletes látogatók nem látják. Ne használd információhordozásra.
- Az **Egérkurzor kattintási effektusa** a kurzort akkor cseréli, amikor a mutató egy link fölött van, nem akkor, amikor a látogató kattint.
- Az **Oszlop** és a **Szakasz** csak a régi, szakaszokkal és oszlopokkal épített oldalon működik. Tárolóalapú oldalon nem csinálnak semmit.
- Az egyedi kurzorkép a terület minden elemén lecseréli a mutatót, ezért a látogató elveszti a szokásos jelzést arról, hogy valami link. Tartsd kicsin a képet, és a linkeket máshogy is tedd egyértelművé.
- A **Folyamatjelző kurzor (oldaltörzs)** megrajzolja a gyűrűjét, de a gyűrű nem tölt fel görgetés közben. Lásd az [Egérkurzor: folyamatjelző kör](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kurzor-gyuru/) fejezetet.

## Hibaelhárítás

**A szerkesztőben semmi sem történik.** Ez így van: a panel is azt írja, hogy a widget csak a nyilvános felületen működik. Használd az előnézetet, vagy nyisd meg az oldalt.

**A laptopomon működik, a telefonomon nem.** Ez is így van: minden effektus 991 képpontnál és alatta ki van kapcsolva.

**A kurzor az egész oldalra érvényes, pedig csak egy szakaszra szántam.** Állítsd a **Kurzor területe** értékét **Törzs**ről **Tároló**ra, és ellenőrizd, hogy a widget abban a tárolóban van-e, amelyiket szánod.

**Az egyedi kurzorképem nem látszik.** Tartsd kicsin a képet: a nagyot a böngésző figyelmen kívül hagyhatja. Az átlátszóságot támogató formátumot használj, hogy tisztán üljön a tartalom fölött.