Afin de modifier un élément lorsqu'il est survolé par la souris, on utilise la pseudo-classe :hover

Ici, tous les éléments du site seront bleu au survol:

<p>Texte</p>
<a href="#" class="button">Lien 1</a>
<a href="#" class="link">Lien 2</a>
<a href="#">Lien 3</a>

:hover {
  color: blue;
}

<aside> ⚠️ On n’utilise jamais cette méthode, car on veut toujours cibler des éléments précis qui auront un effet au survol

</aside>

Ici, tous les liens seront bleu au survol:

<p>Texte</p>
<a href="#" class="button">Lien 1</a>
<a href="#" class="link">Lien 2</a>
<a href="#">Lien 3</a>

a:hover {
  color: blue;
}

Ici, les éléments avec la classe button  seront bleu au survol:

<p>Texte</p>
<a href="#" class="button">Lien 1</a>
<a href="#" class="link">Lien 2</a>
<a href="#">Lien 3</a>

.button:hover {
  color: blue;
}

<aside> 📖 Pour un rappel des combinaisons de sélecteurs:

Sélecteurs CSS - Combiner les sélecteurs

</aside>

a:hover {
	color: #0000de;
}

.button:hover {
	background: #ff3ead;
}	

<aside> ➡️ Transitions

</aside>