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 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, nad którego obszarem znajduje się kursor myszy

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