Maison > Article > interface Web > Comment utiliser le survol en CSS
Comment utiliser le survol en CSS
- 小老鼠original
- 2023-11-24 10:32:051456parcourir
En CSS, :hover est un sélecteur de pseudo-classe utilisé pour sélectionner l'élément survolé par le pointeur de la souris. Vous pouvez utiliser :hover pour appliquer certaines modifications de style lorsque l'utilisateur survole un élément.
Voici un exemple simple d'utilisation de :hover pour changer la couleur d'un lien :
a {
color: blue;
}
a:hover {
color: red;
}
Dans cet exemple, lorsque l'utilisateur survole un lien, la couleur du lien passe au rouge. Lorsqu'il n'y a pas de survol, la couleur du lien est bleue.
En plus de changer les couleurs, vous pouvez également utiliser :hover pour appliquer d'autres modifications de style, telles que la couleur d'arrière-plan, le style de bordure, la taille de la police, etc. Voici un exemple plus complexe :
button {
background-color: lightgray;
border: none;
padding: 10px 20px;
font-size: 16px;
}
button:hover {
background-color: gray;
color: white;
border: 2px solid white;
font-size: 18px;
}
Dans cet exemple, lorsque l'utilisateur survole un bouton, la couleur d'arrière-plan du bouton passera au gris, la couleur du texte passera au blanc et la bordure passera au blanc, ainsi que la taille de la police. sera augmenté à 18 pixels.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!