Propriétés de pseudo-classe dynamique CSS : survol, actif et focus

Propriétés de pseudo-classe dynamique CSS : survol, actif et focus, des exemples de code spécifiques sont requis

Dans le développement front-end, CSS est une technologie très importante qui peut réaliser le style et la mise en page de la page. En plus des paramètres de style de base, CSS fournit également des propriétés de pseudo-classe dynamiques, telles que le survol, l'activité et le focus, qui peuvent modifier le style d'un élément lorsque l'utilisateur interagit avec lui. Cet article présentera en détail ces trois attributs de pseudo-classe dynamiques et donnera des exemples de code spécifiques.

1. Attribut de pseudo-classe Hover

hover est un attribut de pseudo-classe qui se déclenche lorsque l'utilisateur passe la souris sur un élément. En définissant l'attribut hover, nous pouvons changer le style de l'élément lorsque la souris est survolée. Voici un exemple spécifique :

Le code HTML est le suivant :

<button class="button">悬停我</button>

Le code CSS est le suivant :

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

.button:hover {
  background-color: red;
}

Dans l'exemple ci-dessus, nous avons créé un élément bouton Dans l'état initial, la couleur d'arrière-plan du bouton est. bleu et le texte est blanc. La couleur d'arrière-plan du bouton passe au rouge lorsque la souris le survole.

2. Attribut de pseudo-classe actif

active est un attribut de pseudo-classe qui se déclenche lorsque l'utilisateur clique sur un élément. En définissant l'attribut actif, nous pouvons changer le style de l'élément lorsque nous cliquons. Voici un exemple spécifique :

Le code HTML est le suivant :

<button class="button">点击我</button>

Le code CSS est le suivant :

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

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

Dans l'exemple ci-dessus, nous avons créé un élément bouton Dans l'état initial, la couleur d'arrière-plan du bouton est. bleu et le texte est blanc. Lorsque l'utilisateur clique sur le bouton, la couleur d'arrière-plan du bouton passe au vert.

3. Attribut de pseudo-classe Focus

focus est un attribut de pseudo-classe qui est déclenché lorsque l'utilisateur met le focus sur un élément. Généralement utilisé pour les éléments de formulaire tels que les zones de saisie. Voici un exemple spécifique :

Le code HTML est le suivant :

<input type="text" class="input">

Le code CSS est le suivant :

.input {
  border: 1px solid gray;
  padding: 5px;
}

.input:focus {
  border-color: blue;
}

Dans l'exemple ci-dessus, nous avons créé un élément de zone de saisie et la couleur de la bordure de la zone de saisie est grise dans l'état initial. Lorsque l'utilisateur place le focus sur la zone de saisie, la couleur de la bordure de la zone de saisie passe au bleu.

Il convient de noter que les attributs de pseudo-classe hover, active et focus ne sont déclenchés que lorsque l'utilisateur interagit avec l'élément, les habitudes de fonctionnement de l'utilisateur doivent donc être prises en compte lors de la conception du style de page.

Résumé :

Les attributs de pseudo-classe dynamiques de CSS peuvent améliorer l'expérience utilisateur en modifiant le style des éléments. Dans cet article, nous avons découvert trois propriétés de pseudo-classe dynamiques couramment utilisées : survol, active et focus, et avons donné des exemples de code spécifiques. J'espère que cet article sera utile pour votre développement front-end.

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!