Pseudo-classe CSS :hover
Usa la pseudo-classe CSS :hover per applicare stili al link o all'elemento su cui passi il mouse. Scopri la pseudo-classe e prova gli esempi.
La pseudo-classe :hover seleziona e applica stili all'elemento su cui si passa il mouse. Si attiva quando l'utente sposta il puntatore del mouse sopra l'elemento. Il passaggio del mouse non richiede di attivare il dispositivo di puntamento.
La pseudo-classe :active può coesistere con :hover. Quando si applicano entrambe, :active ha la precedenza per via dell'ordine della cascata, anziché sovrascrivere rigorosamente :hover.
Molti dispositivi touch non supportano :hover perché non hanno uno stato di hover persistente; toccare un elemento di solito attiva invece :active o :focus.
Per una migliore accessibilità, è consigliabile applicare gli stessi stili a :focus insieme a :hover. Per assicurarti che gli stili si applichino solo sui dispositivi che supportano l'hover, racchiudi le tue regole in @media (hover: hover) { ... }.
Versione
Sintassi
Sintassi CSS :hover
:hover {
css declarations;
}Esempio della pseudo-classe :hover:
Esempio della pseudo-classe CSS :hover
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:hover {
background-color: #8ebf42;
color: #666;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Passa il mouse sopra i link per vedere come cambia il colore.
Esempio della pseudo-classe :hover con il tag <a>:
Esempio di codice CSS :hover con un link
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
a:hover {
background-color: #555;
color: #eee;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
</body>
</html>Esempio della pseudo-classe :hover con il tag <div>:
Esempio di codice CSS :hover con un div
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 30px;
background-color: #8ebf42;
color: #eee;
}
div:hover {
background-color: #444;
color: #fff;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<div>
Lorem ipsum is simply dummy text...
</div>
</body>
</html>