#37. Stany elementów

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.:

  1. Ustawić selektor danego elementu wraz z oczekiwanym stanem: .element_1:hover.
  2. Następnie dodać właściwość:
.element_1:hover {
    background-color: blue;
} 

Spójrz na poniższy przykład zastosowania stanu :hover.:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

infallible-field-5bpb9

infallible-field-5bpb9 by danielminschinski

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:

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

objective-visvesvaraya-csdgr

objective-visvesvaraya-csdgr by danielminschinski

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

upbeat-mayer-k6198

upbeat-mayer-k6198 by danielminschinski

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

distracted-greider-3myc7

distracted-greider-3myc7 by danielminschinski

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

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!