Maison >interface Web >tutoriel CSS >Comment utiliser l'action en CSS

Comment utiliser l'action en CSS

下次还敢
下次还敢original
2024-04-28 14:30:211015parcourir

Le mot-clé action en CSS est utilisé pour définir le comportement lorsque la souris survole ou active un élément Syntaxe : element:action { style-property: value }. Il peut être appliqué aux pseudo-classes :hover et :active pour créer des effets interactifs tels que changer l'apparence des éléments, afficher des éléments cachés ou démarrer des animations.

Comment utiliser l'action en CSS

Utilisation de l'action en CSS

Le mot-clé action est utilisé en CSS pour définir le comportement lorsque la souris survole et active des éléments. Il spécifie le style à appliquer lorsque l'événement spécifié se produit.

Syntaxe :

<code>element:action {
  style-property: value;
}</code>

Événements :

  • hover : Lorsque la souris survole l'élément
  • active : Lorsque l'élément est activé (par exemple, lorsqu'un bouton est cliqué)

Utilisation :

le mot-clé action peut être utilisé pour créer divers effets interactifs, tels que :

  • Changer la couleur d'arrière-plan d'un élément :
<code>button:hover {
  background-color: #00FF00;
}</code>
  • Ajouter ou supprimer une bordure :
<code>a:active {
  border: 1px solid #FF0000;
}</code>
  • Changer la police d'un élément Taille ou style :
<code>h1:hover {
  font-size: 1.5em;
  font-weight: bold;
}</code>
  • Afficher les éléments cachés :
<code>.hidden:hover {
  display: block;
}</code>
  • Démarrer l'animation :
<code>.my-element:active {
  animation: my-animation 2s infinite;
}</code>

Remarque :

    le mot-clé d'action peut ne doit être utilisé qu'avec les types de pseudos :hover et :active.
  • La portée du mot-clé action est limitée à l'événement défini.
  • Vous pouvez utiliser plusieurs mots-clés d'action pour spécifier différents comportements d'éléments sous différents événements.

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!

Déclaration:
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
Article précédent:En CSS, le rôle de clear:bothArticle suivant:En CSS, le rôle de clear:both