Elemállapotok és hover stílusok

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.

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.