Stan :hover
O tym stanie wspominałem już w materiałach pod kategorią “Zabawa z CSS”. Element HTML może przyjąć pewien stan, dla którego możemy za pomocą odpowiednich pseudoklas, określić jak w danym stanie ma wyglądać.
Podczas najeżdżania na dany element HTML kursorem, jest on w stanie :hover. Gdy klikniemy na link, jest on w stanie :active. Natomiast jeśli postawimy kursor w polu formularza, będzie on w stanie :focus.
Na tapetę bierzemy stan :hover. Wyobraźmy sobie że mamy jakiś element z klasą element_1 i chcielibyśmy, aby po najechaniu kursorem zmienił swój kolor tła na niebieski. Trzy kroki należy wykonać aby otrzymać rezultat wspomnianego stanu, tzn.:
- Ustawić selektor danego elementu wraz z oczekiwanym stanem:
.element_1:hover. - Następnie dodać właściwość:
.element_1:hover {
background-color: blue;
} Spójrz na poniższy przykład zastosowania stanu :hover.:
Ożywiamy nawigację strony www
Aby wykonać wysuwane menu należy użyć poznanych selektorów, które odpowiednio trzeba zgrupować aby we właściwym momencie wyświetlić potrzebne elementy. Spójrz na poniższy przykład i zapewne stwierdzisz że to proste zadanie:
Stan :active
:active jest stanem elementu aktywnego. W tym stanie elementy HTML w momencie kliknięcia na nie, a dokładniej mówiąc po naciśnięciu przycisku myszy i przed puszczeniem go, będąc kursorem nad danym elementem.
Selektor :active może zostać dopisany dla każdego elementu, takie jak p, a, div.
Ważną informacją jest, że jeśli deklarujemy dla jednego elementu :hover oraz :active to :active musi znajdować się za hoverem (dla poprawnego działania).
Poniżej dodaje przykład zastosowania stanu :active:
Stan :focus
Stan :focus jest stanem elementów, które reagują na akcję wykonywane przez klawiaturę lub inne aktywowanie ich (np. przez kliknięcie).
Są różne pola w które możemy np. wpisywać tekst. Takimi elementami zwykle są elementy formularzy (input, textarea, itp).
Spójrz na poniższy przykład z zastosowaniem stanu :focus:
Po krótce opisałem popularne stany elementów HTML. Krótko ale mam nadzieje że przykłady wystarczająco wyjaśniają wszystkie wątpliwości😉
W sobotę opublikuję kolejny materiał. Szerzej przyjrzymy się tematyką pseudoklas.
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA