Evaluarea stelelor cu o frecvență de invidiat găsită pe aproape toate site-urile web. Astăzi am decis să experimenteze un pic, și de a dezvolta o nouă abordare pentru a crea stelare de rating cu un mic fragment de cod CSS, și nu să recurgă la codul j # 097; vascript.
În planul pentru stea, unitatea Unicode este utilizată (☆). Dacă aveți codarea UTF-8, atunci nu va exista probleme. În caz contrar, puteți utiliza ☆. Puteți folosi cât mai multe stele doriți:
Acum trebuie să înlocuim această stea "goală" cu "greu" atunci când plutește. Puteți să creați pur și simplu un element pseudo al unei stele solide (★) deasupra acestuia la eveniment: hover
Datorită faptului că elementul are o poziționare absolută, aplicăm top: 0; stânga: 0; (cel puțin în noile browsere). Astfel, se pare că steaua solidă stă direct peste cea goală. Puteți chiar schimba dimensiunea sau culoarea, dacă doriți.
Dar, totuși, ceea ce avem este lucrul numai cu stele individuale. Structura noastră UX necesită ca toate stelele să fie completate. De exemplu, dacă am pus lucrurile în patra stea, nu numai că trebuie să fie umplut, dar, de asemenea, a 3-a, 2 și 1.
Este imposibil să selectați copiii anteriori prin intermediul CSS. Cu toate acestea, avem capacitatea de a selecta copiii următori. De exemplu, prin intermediul unui combinator adiacent sau general. Dacă ne întoarcem puțin peste caracterul următor, atunci putem folosi Combinator generală frate de a aloca stele situate la acea stea, care a fost locul cursorul mouse-ului (ca, de fapt, în codul HTML va fi evidențiat în următoarele stele tocmai le-a afișat în nostru inversat).
Și asta este! O structură UX completă folosind un mic cod. Aici este tot codul CSS, din cauza căruia va funcționa acest element:
Aplicare în practică
Trimiteți-le prietenilor: