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
.:
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:
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
:
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
:
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
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA