: hover - CSS-Tricks

Anonim

:hoverClasa pseudo elemente CSS selectează atunci când cursorul mouse - ului este de curent peste ele. Este frecvent asociat cu elemente link ( ).

a:hover ( color: green; text-decoration: underline overline; )

Deci, atunci când un link ca acesta este „planat” (cum ar fi cu un cursor pe un dispozitiv cu mouse-ul):

Go to Google

Va deveni verde și va avea o linie dedesubt și deasupra ei.

În IE 6 și versiunile ulterioare, :hover obișnuia să funcționeze numai pe linkuri, dar în browserele mai noi, funcționează pe orice element. Acest lucru poate fi deosebit de util pentru lucruri precum meniurile derulante în care puteți aștepta :hover un element din lista părinte și apoi să dezvăluiți nivelul următor al meniului imbricat. Cu toate acestea, cu atenție, efectele hover ar trebui să fie combinate cu un fel de acțiune, deoarece acesta a fost un model web de lungă durată.

Legate de

  • :legătură
  • :vizitat
  • : focalizare
  • :activ
  • Iubire ura

Mai multe resurse

  • Documente MDN pe: plasați cursorul
  • Specificația W3C pe: hover

Suport pentru browser

:hoverClasa pseudo este suportat de toate browserele.