Jeśli pracujesz z CSS, to wiesz, że style są stosowane do selektorów, które z kolei zawierają elementy HTML. Ale nie zawsze. Istnieje fantomowa klasa klas, która występuje tylko w pewnych stanach obiektu. Na przykład naciśnięty zostanie przycisk lub wybrane pole wejściowe. W takich specjalnych przypadkach istnieją pseudoklasy CSS: focus,: hover ,: active.

Dynamiczne pseudoklasy

CSS definiuje trzy dynamiczne pseudoklasy: focus,: hover ,: active. Zmieniają wygląd obiektu przy określonych działaniach użytkownika. Oznacza to, że dla ich wyglądu wymagany jest konieczny warunek:

.przycisk: hover {
border: 1px solid # 333;
}
.button: active {
opacity: .5;
}


W tym przykładzie, dopóki użytkownik nie kliknie wskaźnikiem myszy na elemencie z przyciskiem klasy, wpisy w stylu: hover nie pojawią się.

Tradycyjnie do obsługi linków i przycisków używane są pseudoklasy. Ale zakres możliwości jest znacznie szerszy. CSS: focus odnosi się do obiektu strony internetowej, na której koncentruje się dane wejściowe. Najczęściej jest to forma rejestracji i wyszukiwania.

dane wejściowe [typ = "tekst"], dane wejściowe [typ = "wiadomość e-mail"] {
szerokość: 300 pikseli;
rodzina czcionek: "Gochi Hand", kursywą;
text-align: center;
granica: 0;
zarys: brak;
}
input [type = "text"]: focus, input [type = "email"]: focus {
border: 0;
}

: hover odpowiada za elementy, na których znajduje się wskaźnik myszy lub inne urządzenie. Gdy użytkownik aktywuje obiekt na stronie, na przykład kliknie link, pojawi się pseudoklasa: aktywna

Możliwości wykorzystania pseudoklasy

Style: aktywne,: focus,: hover - jest to unikalny sposób komunikacji z użytkownikiem. Zostaniesz poproszony o podanie danych, podświetl linki, zaznacz elementy, które możesz kliknąć. Korzystając z udanych efektów, motywujesz gościa do wpisania adresu e-mail i zasubskrybowania listy mailingowej. Dzięki pięknym "Sign In!", "Read More!" Od tych, którzy przypadkowo trafili na stronę, będzie chęć dalszego podróżowania po tej stronie. Ale nie używaj pseudoklasy bardzo ostrożnie. Jeśli dodasz: unosząc prawie wszystkie elementy, odwiedzający Twoją witrynę mogą zacząć chorobę morską od ogromnego wzrostu lub flashowania obiektów. Zastosuj pseudoklasię CSS, aby zmienić kolor obramowań pola, nie więcej. Najlepszym sposobem prawidłowego oznaczenia: hover jest przyciemnienie koloru czcionki podczas kursora myszy. Ale nie dotykaj rozmiaru - mogą to mieć wpływ na sąsiednie elementy.