Maison> interface Web> tutoriel CSS> le corps du texte

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

WBOY
Libérer: 2023-10-26 11:33:11
original
1993 Les gens l'ont consulté

CSS 动态伪类属性:hover,active 和 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 :

Copier après la connexion

Le code CSS est le suivant :

.button { background-color: blue; color: white; padding: 10px; border: none; } .button:hover { background-color: red; }
Copier après la connexion

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 :

Copier après la connexion

Le code CSS est le suivant :

.button { background-color: blue; color: white; padding: 10px; border: none; } .button:active { background-color: green; }
Copier après la connexion

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 :

Copier après la connexion

Le code CSS est le suivant :

.input { border: 1px solid gray; padding: 5px; } .input:focus { border-color: blue; }
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!