Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
CSS: Pures CSS Star Rating ohne Javascript
Bewertungen auf Webseiten sind ein beliebtes Element. Viele dieser Bewertungssysteme sind allerdings mit Javascript gebaut, meistens mit jQuery. Dies ist nicht mehr nötig und geht mitlerweile komplett ohne Javascript. Der Wert, der aus der Bewertung kommt, ist zudem ein ganz noramales Formular-Feld und kann direkt so benutzt werden.
Hier das Markup für das Sternen-Rating
ERROR: Content Element with uid "3714" and type "ar_codeelem" has no rendering definition!
Wichtig ist, dass das Markup nicht umgebaut wird, bzw. man hier keine weiteren Elemente verschachtelt, da sonst das folgende CSS nicht mehr funktioniert.
CSS
ERROR: Content Element with uid "3715" and type "ar_codeelem" has no rendering definition!
Funktionsweise
Die Rückwärtssortierung sorgt dafür, dass beim Hover/Klick auf einen Stern, die vorherigen mit dem CSS-Siblings-Selektor angesprochen werden können. So werden alle Label Elemente nach dem 5 Sterne Input Orange gestylt, wenn das 5-Sterne Input gehovered oder geklickt wird.
Kommentare
LG Franzi
Hinterlasse einen Kommentar