# Elemállapotok és hover stílusok

> Pszeudóosztályok és pszeudóelemek (:hover, :active, :focus, saját szelektorok) használata egy elem állapotainak és részeinek formázására.

A Bricksben egy elemnek az állapotától függően más stílust adhatsz pszeudóosztályokkal (például egérmutatásra: `:hover`, vagy meglátogatott linknél: `:visited`). Az elem egyes részeit pszeudóelemekkel formázhatod, például az `::first-letter` vagy az `::first-line` elemmel.

## Hover stílusok

Egy interaktív elem fölé állás (hover) állapotát így formázod:

1. Jelöld ki az elemet vagy az osztályt a szerkesztőben.
2. Nyisd meg a pszeudóosztály-menüt, és válaszd a `:hover` állapotot.
3. A stílusbeállításokat ekkor már a hover állapothoz menti a Bricks, az alapállapot helyett.

Ugyanez a munkamenet működik globális osztályoknál, elem azonosítós stílusoknál és más támogatott állapotoknál is.

## Egy állapot vagy elemrész szerkesztése

1. Kattints az elem panelen a szelektormező melletti kurzor ikonra (**Szelektorok**): megnyílik a pszeudóosztály-menü.
2. Kattints a szövegmezőbe, hogy megjelenjen az összes elérhető pszeudóosztály és pszeudóelem.
3. Válaszd ki a szerkeszteni kívántat.

![A pszeudóosztály-menü a Szakasz elem szelektormezője alatt: PSZEUDÓK (GLOBÁLIS) lista a :hover, :active és :focus elemmel](./kepek/stilusok-2-allapotok-menu.webp)

*A pszeudóosztály-menü a Szakasz elem szelektormezője alatt: PSZEUDÓK (GLOBÁLIS) lista a :hover, :active és :focus elemmel* (https://minta-bolt.hu/home/?bricks=run)

A képen a **Pszeudók (globális)** lista a három alapból megjelenő állapottal látszik.

A kiválasztott pszeudókulcsszó kiemelve látszik a jobb sarokban, és a **Szelektorok** ikon is kiemelt: ez jelzi, hogy most egy pszeudóosztály vagy pszeudóelem stílusát szerkeszted. Ilyenkor a stílusvezérlők csak az aktív állapotot módosítják.

Az állapotból kilépéshez nyisd meg újra a **Szelektorok** menüt, és kattints még egyszer az aktív állapotra. Ha egy globális osztályt szerkesztesz tovább, ne az X-et használd: az az osztály kijelölését is megszünteti, és a további módosítások az elem azonosítójára kerülnének.

A szelektormező kis jelzéssel mutatja, hány pszeudóosztály vagy pszeudóelem van beállítva az elemen vagy a sablonstíluson. A legördülő listában a stílussal rendelkező állapotok mellett kis pont látszik. Egy állapot stílusainak törléséhez kattints erre a pontra.

## Saját pszeudóosztályok és pszeudóelemek

Alapból a `:hover`, az `:active` és a `:focus` jelenik meg, de bármilyen más pszeudóosztályt vagy pszeudóelemet hozzáadhatsz. Írd be, amit szeretnél (például `:visited`), majd nyomj Entert, vagy kattints a kis mentés ikonra.

## Saját pszeudókulcsszó törlése

A saját magad által felvett pszeudóosztályokat és pszeudóelemeket törölheted (a Bricks alapértelmezettjeit nem):

1. Nyisd meg a pszeudóosztály-menüt, és a legördülő listát.
2. Vidd az egeret a törlendő kulcsszó fölé.
3. Kattints a kuka ikonra.

## Példa: gyermekosztály formázása a szülő hoverére

Van egy Div, benne egy Címsor elem, a címsornak `text--blue` osztálya van kék szöveggel. Azt szeretnéd, hogy a címsor más színű legyen, amikor a Div fölé állsz.

1. A Divnek állíts be 40 px belső margót minden oldalon, hogy látszódjon az eredmény.
2. Jelöld ki a Divet.
3. Kattints a **Szelektorok** ikonra.
4. Kattints a beviteli mezőbe.
5. Írd be: `:hover .text--blue`, majd nyomj Entert, vagy kattints a mentés ikonra.
6. A Div legyen továbbra is kijelölve, nyisd meg a **Stílus → Tipográfia** részt, kattints a **Szín** vezérlő körére, és válaszd ki a kívánt színt.

Mentsd el, és nézd meg a weboldalon: a Div fölé állva a címsor színe megváltozik.