Exploration des propriétés des pseudo-classes dynamiques CSS : survol, actif et focus

Exploration des propriétés de pseudo-classe dynamique CSS : survol, actif et focus

Introduction :
Les propriétés de pseudo-classe dynamique CSS sont un outil important pour créer de l'interactivité et des effets dynamiques. Parmi eux, survol, actif et focus sont les trois attributs de pseudo-classe les plus couramment utilisés. Cet article présentera en détail l’utilisation de ces trois attributs de pseudo-classe et fournira des exemples de code spécifiques. Attribut pseudo-classe

1. hover : L'attribut pseudo-classe
   hover est utilisé pour spécifier le style lorsque la souris survole l'élément. Les applications courantes incluent la modification de la couleur des liens, l'affichage du contenu caché, etc.

Exemple de code :

a:hover {
  color: red;
}

.div:hover {
  display: block;
}

Dans l'exemple ci-dessus, lorsque la souris survole le lien, sa couleur sera changée en rouge ; lorsque la souris survole l'élément .div, il sera affiché (s'il l'était masqué à l'origine) ).

2. attribut pseudo-classe actif :
   attribut pseudo-classe actif est utilisé pour spécifier le style lorsque la souris est enfoncée. Généralement utilisé pour créer des effets de pression sur un bouton ou des effets de clic sur un lien.

Exemple de code :

.button:active {
  background-color: yellow;
}

a:active {
  color: blue;
}

Dans l'exemple ci-dessus, lorsque le bouton est enfoncé, sa couleur d'arrière-plan devient jaune ; lorsque le lien est cliqué, la couleur du texte du lien devient bleue. Attribut de pseudo-classe

3. focus : L'attribut de pseudo-classe
   focus est utilisé pour spécifier le style de l'élément actuellement ciblé. Principalement utilisé dans les éléments de formulaire pour marquer les champs saisis par l'utilisateur.

Exemple de code :

input:focus {
  border: 2px solid green;
}

textarea:focus {
  box-shadow: 0 0 5px yellow;
}

Dans l'exemple ci-dessus, lorsque la zone de saisie obtient le focus, la bordure devient verte ; lorsque le champ de texte obtient le focus, un effet d'ombre jaune s'affiche.

Résumé :
Les propriétés de pseudo-classe dynamiques CSS sont un outil important pour créer de l'interactivité et des effets dynamiques, parmi lesquels survol, actif et focus sont les trois propriétés de pseudo-classe les plus courantes. En utilisant rationnellement ces attributs de pseudo-classe, vous pouvez facilement réaliser des changements de style des éléments de page lors de l'interaction avec la souris et de l'état du focus. Nous espérons que les exemples ci-dessus pourront aider les lecteurs à mieux comprendre et utiliser ces attributs pour créer des effets de page Web plus interactifs et dynamiques.

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!