Ostatnio edytowany:

:hover

Autor: Virtual Patriot

Przeznaczenie selektora :hover

      :hover { ... }
    

Selektor :hover odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :hover.

Cechy elementu HTML spełniają zasadę pseudoklasy :hover, gdy w danym momencie nad obszarem danego elementu HTML lub nad treścią znajdującą się w zawartości danego elementu HTML znajduje się kursor myszy.

Urządzenia mobilne (komórki, tablety itp.) mogą różnie interpretować selektor ":hover" lub też wcale (w zależności od typu urządzenia oraz przedmiotu, jakim użytkownik porusza się po ekranie danego urządzenia mobilnego).

Dodatkowe techniczne informacje o selektorze :hover

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor :hover

p:hover {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p:hover { color:red; }
    
p:hover

do każdego elementu p, którego cechy w danym momencie spełniają zasadę pseudoklasy :hover

color

dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML

red

na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p {
        border:3px solid black;
      }

      p:hover {
        color:red;
      }
    </style>
  </head>

  <body>

    <p>
      w momencie gdy kursor myszy będzie znajdował się nad obszarem tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
    </p>

    <p>
      w momencie gdy kursor myszy będzie znajdował się nad obszarem tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
    </p>

    <p>
      w momencie gdy kursor myszy będzie znajdował się nad obszarem tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony
    </p>

  </body>
</html>

Rezultat

w momencie gdy kursor myszy będzie znajdował się nad obszarem tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony

w momencie gdy kursor myszy będzie znajdował się nad obszarem tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony

w momencie gdy kursor myszy będzie znajdował się nad obszarem tego elementu "p" tekst znajdujący się w zawartości tego elementu "p" będzie posiadał kolor czerwony

Interpretacja selektora :hover

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak