# Egérkurzor: folyamatjelző kör

> A Követő kör típus Folyamatjelző kurzor (oldaltörzs) stílusa: két gyűrű, méretek, színek és az, mit tud valójában.

A **Folyamatjelző kurzor (oldaltörzs)** az **Egérkurzor** widget **Követő kör** típusának három stílusa közül az egyik. Kitöltött kör helyett kétgyűrűs SVG-t rajzol, amely követi a mutatót. Ez az egyetlen kurzorstílus, amelyik egy kurzorterülethez kötött: csak akkor épül fel, ha a **Kurzor területe** **Törzs**, erre utal a név zárójeles része is. A widget közös beállításait az [Egérkurzor: áttekintés](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kurzor-attekintes/) fejezet írja le.

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

## Mielőtt elkezdesz

- A widget a **The Plus Addons → Widgets** oldalon a **Mouse Cursor** kapcsolóval kapcsolható be.
- A szerkesztőben a widget semmit sem rajzol ki, ezért a nyilvános oldalon nézd meg.
- Az effekt kikapcsol, ha a böngészőablak 991 képpont vagy keskenyebb.

## Folyamatjelző kurzor hozzáadása

1. Húzd az **Egérkurzor** widgetet az oldalra.
2. Állítsd a **Kurzor területe** értékét **Törzs**re. Ez a stílus más területtel nem működik.
3. A **Típus** sorban kattints a **Követő kör** képre.
4. A **Mutatótípus** maradjon **Előre meghatározott**, és a **Mutató kiválasztása** mezőben válaszd ki, melyik mutatót lássa alatta a látogató.
5. A **Követő kör stílusa** legyen **Folyamatjelző kurzor (oldaltörzs)**.

![A Követő kör stílusa Folyamatjelző kurzorra állítva](./kepek/kepek-media-kurzor-panel-gyuru.webp)

*A Követő kör stílusa Folyamatjelző kurzorra állítva* (https://minta-bolt.hu/wp-admin/post.php?post=199&action=elementor)

A képen a **Kurzor területe** **Törzs**, a **Típus** **Követő kör**, a **Mutatótípus** **Előre meghatározott**, a **Mutató kiválasztása** **célkereszt**, a **Követő kör stílusa** pedig **Folyamatjelző kurzor (oldaltörzs)**. Alatta az **Első kör mérete** és a **Második kör mérete** csúszka látszik, majd az eltolások, a **Kör Z-indexe** és a **Címkék listája a rámutatási effektushoz**. A panel megjegyzése szerint a 2-es stílus csak akkor működik, ha a kurzorterületen a törzs lehetőséget választod ki.

Két extra csúszka jelenik meg. Ezek annak a két körnek a sugara, amelyből a gyűrű épül, egy rögzített 200 × 200 képpontos rajzterületen belül, ezért állnak meg 90-nél.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Első kör mérete** | A pálya gyűrű sugara. 0 és 90 között állítható | 80 |
| **Második kör mérete** | A rajta rajzolt gyűrű sugara. 0 és 90 között állítható | 80 |
| **Kurzor bal oldali eltolása** és **Kurzor felső eltolása** | A gyűrűt eltolják a mutatótól | 10 px mindkettő |
| **Kör Z-indexe** | A rétegsorrend. Növeld, ha a gyűrű a tartalom mögé kerül | 1 |

Mindkét méretet 80-ra állítva a két gyűrű pontosan egymásra esik. Ha eltéríted őket, például 80 és 60 értékkel, két jól elkülönülő gyűrűt kapsz.

![A kétgyűrűs kurzor a nyilvános oldalon](./kepek/kepek-media-kurzor-gyuru.webp)

*A kétgyűrűs kurzor a nyilvános oldalon* (https://minta-bolt.hu/km5-kurzor-gyuru/)

A képen a két gyűrű a mutató körül látszik (itt 80 és 60 a két méret), az oldal tetején a címsor.

## Színek

Nyisd meg a **Stílus** fület, ott a követő kör szakaszát. Két szín fontos itt.

![A követő kör stílusbeállításai](./kepek/kepek-media-kurzor-panel-gyuru-stilus.webp)

*A követő kör stílusbeállításai* (https://minta-bolt.hu/wp-admin/post.php?post=199&action=elementor)

A képen a **Kör színe**, a **Körvonal szélessége**, a **Kitöltési szín**, az **Átlátszatlanság**, **A kör folyamatjelzőjének színe**, a **Körvonal folyamatjelzőjének szélessége**, a **Transzformációs CSS** és az **Átmenet időtartama** látszik.

- A **Kör színe** a pálya gyűrű színe.
- **A kör folyamatjelzőjének színe** a ráfestett gyűrű színe.
- A **Körvonal szélessége** és a **Körvonal folyamatjelzőjének szélessége** adja meg, milyen vastag az egyik és a másik. Mindkettő 10 px-ről indul.
- A **Rámutatás** fül mind a négyet megismétli arra az esetre, amikor a mutató egy megfelelő elem fölött van.

## A folyamatjelző nem halad

A név arra utal, hogy a gyűrű görgetés közben töltődik fel. Ebben a változatban ez nem történik meg. Egy 3872 képpont magas próbaoldalon a gyűrű 0, 25, 50, 75 és 100% görgetésnél mért állapota minden alkalommal azonos volt: a részleges ívet megrajzoló szaggatásoffset sosem kapott értéket, ezért a folyamatjelző gyűrű mindig teljes.
Kezeld a **Folyamatjelző kurzor (oldaltörzs)** stílust kétgyűrűs kurzorként, ne görgetésjelzőként. Valódi görgetésjelzőhöz használj görgetési folyamatjelző sávot.

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

A **Címkék listája a rámutatási effektushoz** a **Tartalom** fülön CSS-választót vár, és az alapértéke `a`. Több választót vesszővel válassz el, például `a,h1,h2`. Ami nem érvényes CSS-választó, az az egész kurzort működésképtelenné teszi.

## Hogyan viselkedik

- A gyűrű csak akkor épül fel, ha a **Kurzor területe** **Törzs**. Bármely más területnél egyszerű kört kapsz, gyűrű és SVG nélkül.
- Az **Első kör mérete** és a **Második kör mérete** sugár egy rögzített 200 × 200 képpontos dobozban, ezért a 90 a gyűrű legnagyobb mérete.
- A gyűrű rejtve van, amíg a mutató először be nem lép az oldalra.
- Az effekt 992 képpont ablakszélesség alatt teljesen ki van kapcsolva.

## Korlátozások

- A widget csak Pro. A Pro bővítmény nélkül nincs kurzor, és értesítés sem jelenik meg.
- 991 képpont ablakszélességnél és alatta nem történik semmi.
- A gyűrű ebben a változatban nem követi a görgetést: teljesen megrajzolva marad az oldal tetejétől az aljáig.
- A stílus csak a **Törzs** területnél építi fel a gyűrűt. Bármely más terület csendben sima kört ad.
- A **Kör Z-indexe** 1-ről indul, ezért a gyűrű a legtöbb pozicionált tartalom mögött van, amíg nem növeled.
- A gyűrű nem lehet nagyobb a 200 × 200 képpontos rajzterületnél, bármilyen méreteket állítasz be.

## Hibaelhárítás

**Sima kört látok, nem gyűrűt.** A **Kurzor területe** nem **Törzs**. A gyűrű csak azzal épül fel.

**A gyűrű soha nem töltődik fel görgetéskor.** Ez a fenti ismert korlátozás, nem egy kihagyott beállítás.

**Csak egy gyűrűt látok.** Az **Első kör mérete** és a **Második kör mérete** is 80 alapon, ezért a két gyűrű pontosan fedi egymást. Mozdítsd el az egyiket.

**A gyűrű elbújik a szakaszaim mögött.** Növeld a **Kör Z-indexe** értékét.