Wyciśnij więcej ze stylów przy użyciu pseudoklas (style Interaktywne).
Jak być może wiesz już, style mogą być użyteczne, aby szybko zastosować ten sam styl do wielu obiektów. Można tworzyć / edytować style w stylu Menedżer. Aby uzyskać więcej informacji, zobacz także tę związaną samouczek: Korzystanie z Menedżera stylów .
Jednak można także używać style interakcji! Na przykład można utworzyć efekty kursorem myszy bez zdarzeń lub JavaScript przez definiowanie stylów z
pseudo-klasy.
Poniższe pseudoklasy pozwalają zmieniać wygląd elementów gdy użytkownik wchodzi z nimi w interakcję :
:hover 
wygląd obiektu zmienia się gdy wskaźnik myszy znajduje się nad nim.
:focus
przeważnie wykorzystywany dla elementów formularza, do których możemy wpisać teks, określa wygląd elementu, do którego aktualnie chcemy wpisać tekst.
:active
ustawia wygląd elementu od momentu kliknięcia na niego lewym przyciskiem myszy, do momentu gdy ten przycisk zostanie puszczony.
:invalid
ustawia styl, jeśli dane wejściowe są nieprawidłowe (walidacja HTML5).
:valid
ustawia styl, jeśli dane wejściowe są prawidłowe (walidacja HTML5).
:required
wykorzystywany dla elementów formularza, które są polami wymaganymi, określa wygląd elementów, które muszą zostać zaznaczone/wypełnione przez użytkownika, czyli takich elementów formularza, które posiadają w sobie atrybut required o wartości required.  (walidacja HTML5).
Pokażemy użycie klas pseudo przyciskiem elementów formularzy i polu edycji. Wymaga WYSIWYG Web Builder 8.5.2 lub nowszej!
Krok 2
Wybierz nowo utworzony styl ("rollover_button") w menedżerze stylów i kliknij przycisk "Kopiuj".
Zmień nazwę dla skopiowanego na: "rollover_button: hover"
Ustaw kolor tła na # FFFF00
Kliknij przycisk OK, aby zapisać styl.

Teraz masz 2 nowe style w menedżerze stylów:
rollover_button
rollover_button: hover
Krok 3
Dodaj Przycisk (Push) , Przejdź do edycji obiektu i kliknij zakładkę Style.
Teraz wybierz "rollover_button" (nie "rollover_button: hover '!!!) z listy stylów.
Kliknij OK, aby zapisać zmiany.
Użycie pseudo klasy: ":focus"
Teraz użyjemy: pseudo klasy dla pola wejściowego
Krok 5
Otwórz Menedżera stylów i dodaj nowy styl. Nazwij go "form_field".
Określ następujące wartości:
- Kolor obramowania: # 000000
- Styl obramowania: Solid
- Szerokość obramowania: 1
- Kolor tła: #FFFFFF
Kliknij przycisk OK, aby zapisać styl.
Krok 6
Wybierz  styl "form_field" w menedżerze stylów i kliknij przycisk "Kopiuj".
Zmień nazwę nowego stylu na: form_field:focus
Ustaw kolor tła na #FFC000
Kliknij przycisk OK, aby zapisać styl.

Teraz masz 2 nowe style dla focus w menedżerze stylów:
form_field
form_field:focus
Krok 7
Dodaj pole edycji (z grupy formularz), otwórz właściwości i kliknij zakładkę Style.
Teraz wybierz "form_field" (nie "form_field:focus" !!!) w predefiniowanych styli.
Kliknij OK, aby zapisać zmiany.
Krok 8
Użyj Podglądu strony i kliknij wewnątrz pola edycji.
Można zauważyć, że zachodzi zmiana koloru tła. Jeśli wybierzesz inny element na stronie  kolor tła powróci do jego pierwotnej wartości.
Uwaga do działania wymagane jest użycie nowoczesnej przeglądarki. To nie będzie działać w IE9 i starszych wersjach!
Krok 9
Otwórz Menedżera stylów i dodaj nowy styl. Nazwij go "validation".
Określ następujące wartości:
- Kolor obramowania: # 000000
- Styl obramowania: Solid
- Szerokość ramki: 1
- Kolor tła: #FFFFFF
Kliknij przycisk OK, aby zapisać styl.
Krok 10
Wybierz styl  "validation" w menedżerze stylów i kliknij przycisk "Kopiuj".
Zmień nazwę na: validation:invalid
Ustaw kolor tła na # FF0000
Kliknij przycisk OK, aby zapisać styl.
Krok 11
Wybierz styl "validation" w menedżerze stylów i kliknij przycisk "Kopiuj".
Zmień nazwę na: validation:valid
Ustaw kolor tła na # 00FF00
Kliknij przycisk OK, aby zapisać styl.
Teraz masz 3 kolejne style dla validacji w menedżerze stylów:
validation
validation:invalid
validation:valid
Krok 12
Dodaj pole edycji (z grupy formularz), otwórz właściwości i kliknij zakładkę Style.
Teraz wybierz "validation" z predefiniowanych styli.
Krok 13
Kliknij zakładkę "zatwierdzanie" w polu  editbox.
Tryb ustawiony na HTML5. Ustaw typ danych na adres email.
Krok 14
Użyj Podglądu strony i wpisz dowolny tekst (który nie jest poprawnym adresem e-mail) . Można zauważyć, że tło zmieni kolor na czerwony.
Następny podaj poprawny adres e-mail. Tło powinno stać się zielone.
Oczywiście można zdefiniować własne style i wykorzystywać inne właściwości dla różnych stanów wejściowych.
Omówione tu pseudo-klasy są wspierane przez CSS (są standardową funkcjonalnością CSS)  .
Pokrewne tutoriale:
Jak wstawić obraz wewnątrz tekstu przy użyciu stylów? - How to insert an image inside text by using styles?
Użycie pseudo klasy : ":hover"
Krok 1
Otwórz Menedżera stylów i dodaj nowy styl. Nazwij go "rollover_button". Określ następujące wartości:
- Kolor obramowania: # 000000 - (border color: #000000)
- Styl obramowania: Solid - (border style: Solid)
- Szerokość ramki: 1 - ( border width: 1)
- Kolor tła: #dcdcdc - (background color: #dcdcdc)
Możesz również zmienić którykolwiek z innych stylów, jeśli chcesz ...
Kliknij przycisk OK, aby zapisać styl.
Krok 4
Użyj Podglądu strony i najedź mouyse nad przycisk.
Można zauważyć, że przycisk statyczna jest teraz interaktywny


Demo: hover i focus
Wpisz tekst

Wyjście
---Home------Download------Zakup------Poradniki Online------Szablony------Wsparcie------Forum------Rozszerzenia------Manual------Rózne---
Copyright © 2017