changement de curseur css

Cursor change css

Dans la conception Web, nous devons parfois changer le style de la souris afin que la souris ait de meilleurs effets visuels et une expérience interactive lors de l'interaction de l'utilisateur. À ce stade, nous pouvons changer le style du curseur via CSS. Cet article explique comment modifier le style du curseur via CSS.

1. Propriété du curseur CSS

La propriété du curseur CSS est utilisée pour spécifier le style du pointeur de la souris. Cette propriété accepte une valeur qui représente les différents états du pointeur de la souris. Ces états incluent par défaut, lien, sélection de texte, déplacement, etc. Voici la syntaxe de la propriété CSS du curseur :

cursor: value;

où value peut être l'une des valeurs suivantes :

• auto
• default
• none
• context-menu
• help
• pointer
• progress
• wait
• cellule
• réticule
• texte
• texte-vertical
• alias
• copie
• déplacement
• no-drop
• non autorisé
• grab
• grabbing

2. Types courants Style de pointeur de souris

1. Forme de la main

Le style de pointeur de souris le plus courant est la forme de la main, qui indique que la souris pointe vers un lien. Le style de la forme de la main peut être modifié via CSS.

a:hover {

cursor: grab;

}

Lorsque la souris pointe sur un lien, la souris se transforme en motif de doigt. Lorsque la souris survole un lien, vous pouvez utiliser CSS pour modifier le style du pointeur de la souris à saisir, le faisant ressembler à une poignée de saisie.

2. Symbole interdit

Un autre style de pointeur de souris courant est le symbole interdit, qui est généralement utilisé pour indiquer que l'utilisateur ne peut pas effectuer certaines opérations.

.disable{

cursor: not-allowed;

}

Vous pouvez transformer la souris en une forme de symbole interdite en définissant la valeur non autorisée de l'attribut du curseur CSS. Par exemple, si vous définissez la classe CSS d'un bouton d'action sur .disable, lorsque l'utilisateur essaie de cliquer sur le bouton, le pointeur de la souris se transforme en symbole de désactivation.

3. Symbole d'attente

Parfois, lorsqu'une page met du temps à se charger ou à effectuer certaines opérations, vous pouvez utiliser le symbole d'attente pour indiquer à l'utilisateur que l'opération est en cours et de ne pas partir précipitamment.

.loading {

cursor: wait;

}

peut transformer le pointeur de la souris en symbole d'attente en définissant la valeur d'attente de l'attribut du curseur CSS. Par exemple, lors du chargement d'une grande image, vous pouvez transformer le pointeur de la souris en symbole d'attente lorsque la souris pointe sur l'image, indiquant à l'utilisateur que la page est en cours de chargement.

3. Style de curseur personnalisé

En plus des styles de pointeur de souris courants, vous pouvez également créer des modèles de curseur personnalisés via CSS.

.custom{

cursor: url('custom-cursor.png'), auto;

}

Vous pouvez spécifier le chemin du motif de curseur personnalisé en définissant la valeur url de l'attribut de curseur CSS. Dans cet exemple, nous définissons le chemin sur « testcursor.png » et le style du curseur sur auto. Cela spécifiera la forme du curseur personnalisé et l'appliquera à l'élément spécifié.

4. Déplacer les événements de la souris

Afin d'augmenter l'interaction de l'utilisateur et les effets visuels, vous pouvez modifier le style du pointeur de la souris en déplaçant les événements de la souris.

.box{

cursor: pointer;
transition: all .5s ease;

}
.box:hover{

transform: rotate(90deg);

}

Dans cet exemple, nous définissons la propriété curseur CSS de l'élément .box sur pointer, de sorte que le pointeur de la souris devienne un doigt pointant vers l'élément .box. élément. Nous avons également utilisé des animations de transition CSS3. Lorsque l'utilisateur place le pointeur de la souris sur l'élément .box, l'élément pivote de 90 degrés et le pointeur de la souris se transforme en flèche rotative.

Dans l'ensemble, changer le style du curseur via CSS est une astuce utile pour rendre les interactions des utilisateurs plus personnelles et intéressantes. Nous pouvons choisir différents styles de curseur en fonction des besoins spécifiques pour améliorer l'expérience utilisateur.

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!