Comment utiliser le survol en CSS

La pseudo-classe hover en CSS est un sélecteur très couramment utilisé qui permet de changer le style d'un élément lorsque la souris le survole. Cet article présentera l'utilisation du survol et fournira des exemples de code spécifiques.

1. Utilisation de base
Pour utiliser le survol, nous devons d'abord définir un style pour l'élément, puis utiliser la pseudo-classe :hover pour spécifier le style correspondant lorsque la souris survole.
Par exemple, nous avons un élément bouton, et lorsque la souris survole le bouton, nous voulons que la couleur d'arrière-plan du bouton passe au rouge et la couleur du texte au blanc.

Code HTML :

<button class="btn">按钮</button>

Code CSS :

.btn {
  background-color: blue;
  color: white;
}

.btn:hover {
  background-color: red;
  color: white;
}

Dans le code ci-dessus, .btn est le sélecteur de classe de l'élément bouton, qui définit le style par défaut du bouton. Ensuite, dans .btn:hover, nous définissons le style du bouton au survol.

2. Applications pour différents éléments
Le survol peut être appliqué non seulement aux éléments HTML généraux, mais également à certains autres éléments spéciaux. Vous trouverez ci-dessous plusieurs scénarios d'utilisation courants et des exemples de code spécifiques.

1. Liens
   Lorsque la souris survole un lien, nous changeons généralement la couleur du lien pour rappeler à l'utilisateur que le lien est cliquable.

Code CSS :

a:hover {
  color: red;
}

2. Image
   Lorsque la souris survole l'image, nous pouvons ajouter des effets spéciaux à l'image, comme changer la transparence ou zoomer ou dézoomer.

Code HTML :

<img class="img lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="图片">

Code CSS :

.img {
  transition: all 0.3s ease;
}

.img:hover {
  transform: scale(1.1);
}

Dans le code ci-dessus, la classe .img définit le style par défaut de l'image. Lorsque la souris survole l'image, nous utilisons la pseudo-classe :hover pour définir l'attribut transform afin que l'image soit agrandie 1,1 fois lors du survol.

3. Menu de navigation
   Pour le menu de navigation, nous ajoutons généralement des effets d'animation lorsque la souris survole pour améliorer l'expérience utilisateur.

Code HTML :

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>

Code CSS :

nav ul li a {
  color: #333;
  transition: all 0.3s ease;
}

nav ul li a:hover {
  color: red;
  transform: translateY(-5px);
}

Dans le code ci-dessus, nous définissons le style au survol de la souris en ajoutant la pseudo-classe :hover à la balise a, y compris en changeant la couleur et en décalant de 5 pixels. .

3. Conclusion
hover est un sélecteur de pseudo-classe couramment utilisé en CSS, qui peut nous aider à changer le style des éléments lorsque la souris survole. Grâce à l'introduction et aux exemples de code de cet article, j'espère qu'il pourra aider tout le monde à mieux comprendre et appliquer l'utilisation du survol. Dans les projets réels, chacun peut utiliser le survol de manière plus flexible pour obtenir des effets riches en fonction de ses propres besoins et idées.

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!