Csillagok egy kis CSS-kódot

Csillagok irigylésre méltó sebességgel megtalálható szinte minden weboldalak. Ma úgy döntöttünk, hogy a kísérlet egy kicsit, és dolgozzon ki egy új megközelítés létrehozása csillag minősítés egy töredékét lehet CSS kódot, és nem folyamodnak kódot j # 097; vascript.

Az elrendezés használható a csillag egység Unicode (☆). Ha van egy UTF-8 kódolású, akkor nem lesz probléma. Ellenkező esetben használhatja ☆. Használhatja a sok csillag, mint szeretné:

Most arra van szükség, hogy lebeg cserélni ezt az „üres” csillag „szilárd”. Akkor egyszerűen létrehozhat egy pszeudoelem szilárd csillag (★) a tetején az eseményen: hover

Tekintettel arra, hogy az elem abszolút pozicionálás, mi vonatkozik top: 0; bal: 0; (Legalábbis az újabb böngészők). Úgy tűnik tehát, hogy a szilárd csillag ül kellős tetejére egy üres. Azt is megváltoztathatja a méretét vagy a szín, ha akarja.

Mindazonáltal mi van, hogy csak bizonyos csillagok. A szerkezet UX megköveteli, hogy a csillagok már betöltötték. Például, ha mondjuk a dolgokat, a 4. csillag, nem csak azt kell kitölteni, hanem a 3., 2. és 1..

Lehetetlen különbséget tenni CSS korábbi gyermek elemek. Mindazonáltal megvan a lehetőségünk, hogy kiemelje a következő gyermek elemei. Például, a szomszédos vagy a teljes kapcsolódó kombinátor. Ha csak be a következő karaktert, akkor tudjuk használni az általános testvér kombinátor kiosztani csillagok elhelyezni, hogy az a csillag, amely a hely az egérmutató (mint a tény, hogy a HTML-kód lesz kiemelve a következő csillagok csak megjelenik őket a fordított sorrendben).

És ez az! Teljes UX-szerkezet egy kód segítségével kicsit. Itt megtalálja az összes CSS kódot, amellyel ez az elem fog működni:

Alkalmazását a gyakorlatban