# Egérkurzor: követő kör, keverő kurzor és követő szöveg

> Az Egérkurzor widget három követő típusa: a kör (keretkurzor), a keverő kör, ami átszínezi alatta a tartalmat, és az egérrel mozgó szövegcímke.

Az [Egérkurzor widget](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kurzor-attekintes/) két követő típusa a **Szöveg követése** és a **Kör követése**. Ez a fejezet ezek beállításait írja le: a kört (keretkurzort), a keverő kurzort, amely invertálja vagy átszínezi, ami alatta van, és a szövegcímkét, amely az egérrel mozog.

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

## Mielőtt elkezdesz

- A widgetet a **The Plus Addons → Widgets** oldalon kapcsold be (**Mouse Cursor**).
- 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 nem rajzol semmit, a panelen ez áll: „Ez a widget csak a webhely nyilvános felületén működik.” A kurzort a megjelent oldalon nézd meg.
- Minden kurzoreffektus kikapcsol, ha a böngészőablak 991 képpont vagy keskenyebb, ezért telefonon és a legtöbb tableten nem történik semmi.
- A widget láthatatlan, ezért mindegy, hová húzod a tárolón belül: csak az számít, melyik tárolóban áll.

## Követő kör

A kör finoman az egérmutató után csúszik, a mutató pedig megmarad alatta.

1. Húzd az **Egérkurzor** widgetet a tárolóba, amelyre az effektet szeretnéd.
2. A **Kurzor területe** legyen **Törzs**, ha az egész oldalon működjön, vagy **Tároló**, ha csak egy sávban.
3. A **Típus** sorban kattints a negyedik képre, a **Kör követése** típusra.
4. A **Mutatótípus** legyen **Előre meghatározott** a beépített körstílusokhoz, vagy **Egyedi**, ha saját alakot építesz.
5. **Előre meghatározott** esetén a **Mutató kiválasztása** adja meg, milyen mutatót lát a látogató a kör alatt (alapérték: célkereszt).
6. Válassz alakot a **Követő kör stílusa** listában.

![Az Egérkurzor widget tartalom panelje a követő kör típussal, 90 pixeles körrel](./kepek/kepek-media-kurzor-panel-kor.webp)

*Az Egérkurzor widget tartalom panelje a követő kör típussal, 90 pixeles körrel* (https://minta-bolt.hu/wp-admin/post.php?post=215&action=elementor)

A képen a negyedik típus van kijelölve, alatta a **Követő kör stílusa**, a kör mérete, az eltolások, a **Kör Z-indexe** és a **Címkék listája a rámutatási effektushoz**.

| Stílus | Mit rajzol |
|---|---|
| **Keretkurzor** | Egyszerű, kitöltött kör, amelynek a színét te adod meg. Ez a szokásos választás. |
| **Folyamatjelző kurzor (törzs)** | Két SVG-körből álló gyűrű, csak a **Törzs** területtel működik. Lásd az [Egérkurzor: folyamatjelző kör](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kurzor-gyuru/) fejezetet. |
| **Keverő kurzor** | CSS-keverési móddal rajzolt kör, amely átszínezi, ami alatta van. Lásd lejjebb. |

![Kék, átlátszó kör követi az egeret a fénykép fölött](./kepek/kepek-media-kurzor-kor.webp)

*Kék, átlátszó kör követi az egeret a fénykép fölött* (https://minta-bolt.hu/km6-kurzor-kor/)

A képen a kék kör a fotó fölé került; a mutató alatta marad.

### Méret és pozíció

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Kör maximális szélessége** és **Kör maximális magassága** | A kör mérete. A tökéletes körhöz mindkettő kell, azonos értékkel. | 100 px (0 és 500 között) |
| **Kurzor bal oldali eltolása** és **Kurzor felső eltolása** | A kört eltolja az egérmutatótól. | 10 px mindkettő |
| **Kör Z-indexe** | A kör helye a rétegek között. Növeld, ha a kör eltűnik az oldal tartalma mögött. | 1 (0 és 99999 között) |

A **Kör Z-indexe** valóban 1-ről indul, ami elég alacsony ahhoz, hogy szinte minden pozicionált elem eltakarja a kört. Ha a kör egy részen eltűnik az elrendezésedben, ezt emeld meg.

### Saját kör építése

Ha a **Mutatótípus** értéke **Egyedi**, a tartalom típusát **Kép** vagy **Szín** között választod.

- **Szín** esetén megadhatod a színt, a méretet (alapérték 20 px), a lekerekítést, az elmosást (alapérték 0) és a keverési módot. Ez a kör kattintásáteresztő, a linkeket nem takarja el. Lágy fényfolt vagy elnyújtott folt készítésére jó.
- **Kép** esetén a mutatóra a kiválasztott kép kerül, de a gyári, áttetsző szürke kör is tovább követi az egeret. Ha csak képes mutatót szeretnél, használd inkább a **Kurzorikon** típust az **Egyedi** ikontípussal.

### Normál és rámutatási stílus

A **Stílus** fülön a **Követő kör** blokk **Normál** és **Rámutatás** füleket tartalmaz.

![A követő kör stíluspanelje: háttérszín, átlátszatlanság, transzformációs CSS és átmenet időtartama](./kepek/kepek-media-kurzor-panel-kor-stilus.webp)

*A követő kör stíluspanelje: háttérszín, átlátszatlanság, transzformációs CSS és átmenet időtartama* (https://minta-bolt.hu/wp-admin/post.php?post=215&action=elementor)

- A **Háttérszín** tölti ki a kört.
- Az **Átlátszatlanság** a kör áttetszőségét adja (csak keretkurzornál és keverő kurzornál).
- A **Transzformációs CSS** bármilyen CSS-átalakítást elfogad, például `rotate(10deg) scale(1.1)`.
- Az **Átmenet időtartama** azt adja meg, mennyi ideig tart a változás (alapérték 0,5 mp, 0,1 és 3 között).
- A **Rámutatás** fül ugyanezeket tartalmazza azokra az időkre, amikor a mutató egy megfelelő elem fölött áll.

### Mely elemek számítanak rámutatásnak

A **Tartalom** fülön a **Címkék listája a rámutatási effektushoz** dönti el. CSS-választót vár, a panel példája: `a,h1,h2`. A vesszővel elválasztott értékek szóközzel és szóköz nélkül is működnek (`a,img` és `a, img`). A mező csak valódi CSS-választót fogad el: a hibás, például `a|img` leállítja az egész kurzort, a kör meg sem jelenik, és nem követi az egeret. A panel ezt a mezőt a magyar felületen ma `egy` alapértékkel mutatja az `a` helyett; írd át `a`-ra, ha a linkek fölötti rámutatást szeretnéd.

## Keverő kurzor

A keverő kurzor olyan kör, amely nem ül rá a tartalomra, hanem reagál rá: invertálja a fotót, átszínezi a címsort, vagy világosítja a sötét szakaszt, ahogy áthalad rajta. Hatását a CSS-keverési mód adja.

1. Állítsd be a követő kört a fenti lépésekkel, de a **Követő kör stílusa** legyen **Keverő kurzor**.
2. A **Mutatótípus** maradjon **Előre meghatározott**.
3. Állítsd a **Kör maximális szélességét** és **magasságát** azonos értékre. A keverő kurzor általában nagyobb, mint a sima: 120 és 150 px között jól olvasható.
4. Emeld meg a **Kör Z-indexét**, különben a kör az elemek mögé kerül.

A **Stílus** fülön a **Keverési mód** áll legfelül, alapértéke a `difference`. Utána a **Normál** fülön adj **Háttérszínt**: amíg a körnek nincs színe, a keverési módnak nincs mivel dolgoznia. A fehér szín és a `difference` mód adja a klasszikus invertált fotó hatást.

![A keverő kurzor stíluspanelje: keverési mód, háttérszín, transzformációs CSS, átmenet időtartama](./kepek/kepek-media-kurzor-panel-keveres.webp)

*A keverő kurzor stíluspanelje: keverési mód, háttérszín, transzformációs CSS, átmenet időtartama* (https://minta-bolt.hu/wp-admin/post.php?post=216&action=elementor)

| Keverési mód | Mit csinál |
|---|---|
| `difference` | Invertálja, ami a kör alatt van. Az alapérték és a legerősebb. |
| `exclusion` | Mint a `difference`, de a középtónusokban lágyabb. |
| `multiply` | Sötétít. Világos fotók fölött jó. |
| `screen` | Világosít. Sötét szakasz fölött jó. |
| `overlay`, `hard-light`, `soft-light` | Különböző mértékben növelik a kontrasztot. |
| `hue`, `saturation`, `color`, `luminosity` | A tartalmat megtartják, és csak az adott összetevőt változtatják. |

![A fehér keverő kör invertálja a mögötte lévő fotó színeit](./kepek/kepek-media-kurzor-keveres.webp)

*A fehér keverő kör invertálja a mögötte lévő fotó színeit* (https://minta-bolt.hu/km6-kurzor-keveres/)

A képen a kör és a hegy csúcsa találkozásánál látszik a megfordított szín: a keverés azzal történik, ami a kör mögött tényleg ki van rajzolva.

A **Normál** és **Rámutatás** fül itt is tartalmazza a **Háttérszínt**, a **Transzformációs CSS**-t és az **Átmenet időtartamát**. Hogy mi számít rámutatásnak, a **Címkék listája a rámutatási effektushoz** dönti el, ugyanúgy, mint a sima körnél.

### Mit érdemes tudni a körről és a keverő körről

- A kör rejtve marad, amíg a mutató először be nem lép a területre, utána minden mozdulatot követ.
- A **Mutató kiválasztása** a kör alatti szokásos mutatót módosítja, nem magát a kört.
- **Előre meghatározott** mutatótípusnál a kör nem kattintásáteresztő, a mutató és az oldal közé kerül. Ezért a **Rámutatás** fülön a **Transzformációs CSS** megbízhatatlan lehet: ismételt próbáknál előfordult, hogy a kör megtartotta a rámutatási átalakítást, miközben a mutató messze volt a megfelelő elemtől, máskor pedig nem alkalmazta, miközben fölötte állt. Díszítésnek használd, jelzésnek ne.
- A keverési módnak kell valami a kör mögött. Sima fehér oldal fölött fehér körrel és `difference` móddal semmi sem látszik.

## Követő szöveg

A követő szöveg rövid címkét tesz az egérmutató mellé (például „Projekt megnézése”, „Húzd”, „Tovább”), és az egérrel együtt mozgatja. Ez a legolcsóbb mód arra, hogy megmondd a látogatónak, mit tesz egy kép vagy egy panel, ha rákattint.

1. Húzd az **Egérkurzor** widgetet a tárolóba.
2. A **Kurzor területe** legyen **Törzs** az egész oldalra, vagy **Tároló** egy sávra.
3. A **Típus** sorban kattints a harmadik képre, a **Szöveg követése** típusra.
4. Írd be a címkét a **Szöveg követése** mezőbe. Kezdetben a „Follow Text” szavak állnak benne, ezt írd át magyarra.
5. Tedd közzé az oldalt, és mozgasd az egeret a területen.

![A követő szöveg típus panelje: szöveg, eltolások és a kattintási effektus](./kepek/kepek-media-kurzor-panel-szoveg.webp)

*A követő szöveg típus panelje: szöveg, eltolások és a kattintási effektus* (https://minta-bolt.hu/wp-admin/post.php?post=217&action=elementor)

![A „Projekt megnézése” címke követi az egeret a fénykép fölött](./kepek/kepek-media-kurzor-szoveg.webp)

*A „Projekt megnézése” címke követi az egeret a fénykép fölött* (https://minta-bolt.hu/km6-kurzor-szoveg/)

A képen a címke az egérmutató közepére igazodik. A szöveg a mutató köré van középre igazítva, nem a bal felső sarkára (ellentétben a követő képpel): ha a két típus között váltasz, az eltolásokat újra be kell állítanod. A **Kurzor bal oldali eltolása** és **Kurzor felső eltolása** (alapérték 10 px mindkettő) arra való, hogy a címkét arrébb told a mutatótól, ha takarja.

### A címke stílusa

A **Stílus** fül **Követő szöveg** blokkjában alakítod ki a címke megjelenését.

![A követő szöveg stíluspanelje: padding, tipográfia, szín, háttér, szegély, árnyék](./kepek/kepek-media-kurzor-panel-szoveg-stilus.webp)

*A követő szöveg stíluspanelje: padding, tipográfia, szín, háttér, szegély, árnyék* (https://minta-bolt.hu/wp-admin/post.php?post=217&action=elementor)

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Szöveg paddingje** | A címke belső tere, ettől lesz tabletta vagy címke formájú. | 10 / 15 / 10 / 15 px |
| **Tipográfia** | Betűtípus, méret, vastagság, térköz. | 16 px, örökölt betűtípus |
| **Szöveg színe** | A címke színe. | fekete |
| **Háttér típusa** | Egyszínű vagy átmenetes háttér a címke mögött. | nincs |
| **Szegély típusa** és **Keretsugár** | Körvonal és lekerekített sarkok. | nincs |
| **Szövegdoboz árnyéka** | A címke mögötti árnyék. | nincs |

Ha a **Kurzor területe** **Widget**, a blokk jóval rövidebb: csak a szöveg mérete és színe állítható. A padding, a háttér és a szegély ilyenkor nem érhető el.

### Más címke a linkek fölött

Kapcsold be az **Egérkurzor kattintási effektusa** kapcsolót, és töltsd ki a **Kattintáskor megjelenő szöveg** mezőt. Kezdetben „See More” áll benne, ezt is írd át magyarra. A címke megváltozik, amíg a mutató egy link fölött áll, és visszaáll, ha elhagyja azt. Rámutatásra reagál, nem kattintásra, ezért felszólításnak fogalmazd meg, ne visszaigazolásnak.

### Hogyan viselkedik a szöveg

- A címke rejtve marad, amíg a mutató először be nem lép a területre, utána minden mozdulatot követ.
- Soha nem akadályozza a kattintást: az alatta lévő linkek és gombok működnek.
- A hosszú szöveg nincs tördelve, egy egész mondat nagyon széles sáv lesz. Maradj egy-két szónál.
- Nincs áttűnés és lassítás: a címke minden egérmozdulatnál új helyre kerül.

## Korlátozások

- A widget csak a Pro bővítménnyel működik; kikapcsolt Pro mellett nincs kurzor és nincs értesítés.
- 991 képpont vagy keskenyebb ablaknál semmi sem történik.
- A kör **Kör Z-indexe** alapértéke 1, ezért a kör a legtöbb pozicionált elem mögé kerül, amíg meg nem emeled.
- A hibás CSS-választó a **Címkék listája a rámutatási effektushoz** mezőben üzenet nélkül leállítja az egész kurzort.
- **Egyedi** mutatótípusnál és **Kép** tartalomnál a gyári szürke kör is megmarad a kép mellett.
- A követő szövegnél a **Widget** terület csak a szöveg méretét és színét engedi állítani.
- Az **Egérkurzor kattintási effektusa** a link fölé mutatásra reagál, nem a kattintásra.

## Hibaelhárítás

### A kör vagy a címke egyáltalán nem jelenik meg

Mozgasd először a mutatót a területre: addig rejtve marad, a szerkesztőben pedig a widget semmit sem rajzol. Kör esetén ellenőrizd, hogy a **Címkék listája a rámutatási effektushoz** érvényes CSS-választót tartalmaz-e.

### A kör a szakaszok mögé kerül

Emeld a **Kör Z-indexét**, mert 1-ről indul.

### Ovális a kör

A szélesség és a magasság külön beállítás: állítsd őket ugyanarra az értékre.

### Szürke folt van az egyedi képes mutató mellett

Ez a gyári kör, amely **Egyedi** mutatótípusnál és **Kép** tartalomnál is megmarad. Válts a **Típus** sorban **Kurzorikon**-ra, és használd az **Egyedi** ikontípust.

### Nem látszik a keveredés

Adj a körnek **Háttérszínt** a **Normál** fülön, és győződj meg róla, hogy valódi tartalom (fotó, színes panel) van a kör mögött, nem sima fehér.

### Nincs semmi telefonon

Ez a megszokott működés: minden kurzoreffektus 992 képpontnál keskenyebb ablaknál leáll.

### A címke háttér nélkül jelenik meg, bár beállítottam

Nézd meg a **Kurzor területe** értékét. **Widget** esetén a rövid stílusblokk érvényes, abban nincs háttér.

### A címke a mutató tetején ül

Ott kezd. Növeld a **Kurzor bal oldali eltolását** és a **Kurzor felső eltolását**.

### A címke túl széles

Rövidítsd a szöveget, mert egy sorban jelenik meg, nincs tördelve.