Les amis qui surfent souvent sur Internet ont déjà remarqué que la souris sur certains sites Web n'a pas la forme d'une flèche diagonale vers le haut, mais d'une croix, ou d'une flèche gauche, ou d'un point d'interrogation, etc. Lorsque vous souhaitez que la souris affiche différentes formes à différents endroits de la page Web pour refléter différentes zones fonctionnelles ; lorsque vous souhaitez que votre site Web reflète un style unique, pensez à travailler sur le style de la souris. En fait, les styles de souris ont un large éventail d'utilisations, alors comment pouvez-vous implémenter différents styles de souris ? Démarrez Dreamweaver, ouvrez la page Web sur laquelle vous souhaitez appliquer le style de souris, sélectionnez le menu déroulant Texte dans la fenêtre principale, puis puis sélectionnez Nouveau dans le sous-menu Style CSS. La commande Style crée une nouvelle feuille de style. (Remarque : si une feuille de style existe déjà dans votre page Web, vous pouvez sélectionner Styles CSS Modifier la feuille de style pour modifier la feuille de style.) La boîte de dialogue Nouveau style apparaîtra. L'élément Type comporte trois boutons radio : Créer un style personnalisé, Redéfinir la balise HTML et Utiliser le sélecteur CSS. Parmi eux, Make Custom Style est un style personnalisé, et le nom du style commence par un point ; Utiliser le sélecteur CSS consiste à utiliser le sélecteur CSS, qui contient quatre styles de lien hypertexte
a:active/a:hover/a:link/a:visited. ; Redéfinir la balise HTML est un style qui définit les balises du système HTML, telles que abodybr, etc. Supposons que nous définissons uniquement le style de la souris pour les hyperliens de cette page. Ici, sélectionnez la balise a dans l'option Redéfinir la balise HTML. Sélectionnez Ce document uniquement pour l'élément Définir ci-dessous. Cliquez sur le bouton OK. La boîte de dialogue Définition du style pour apparaît et saisit le paramètre de style de lien hypertexte. La catégorie sur la gauche est la catégorie de style. Il n'y a aucune explication pour les autres éléments ici. Nous choisissons l'élément Extensions. Vous pouvez voir l'élément Curseur dans l'effet visuel sur la droite, qui est l'élément clé pour définir le style de la souris. Cliquez sur le menu déroulant à droite, sélectionnez le style de souris dont vous avez besoin et cliquez sur le bouton OK. Parlons de la signification générale de chaque style.
main : est une forme de main familière.
réticule : Il s'agit d'un réticule en forme de croix, qui est le style utilisé sur la page d'accueil de Little Turtle.
texte : C'est le style lorsque la souris est déplacée sur le texte.
attendre : c'est l'effet de l'attente.
default : C'est l'effet par défaut.
aide : c'est le style de la souris avec un point d'interrogation.
e-resize : est la flèche droite.
ne-resize : la flèche pointe vers le haut vers la droite.
n-resize : est une flèche vers le haut.
nw-resize : la flèche pointe vers le haut vers la gauche.
w-resize : C'est une flèche qui passe vers la gauche.
sw-resize : la flèche pointe vers le bas vers la gauche.
s-resize : est une flèche vers le bas.
se-resize : la flèche pointe vers le bas vers la droite.
auto : C'est l'effet automatique du système.
Bien entendu, vous pouvez également appliquer le style à d’autres balises selon vos besoins, ou simplement l’appliquer à un certain paragraphe de texte. Si le lecteur est familier avec le code CSS, il peut être plus pratique d’écrire le code directement à la main. En particulier, si vous souhaitez utiliser différents styles de souris pour différents emplacements, ou utiliser différents styles de souris pour différents onglets. Écrivez simplement le style directement dans une balise spécifique.
La méthode est la suivante : <tag style=cursor:mouse_style>. Où tag est le nom de la balise, mouse_style est le style de la souris, tel que hand/crosshair/text/wait, etc.
Donnons un exemple spécifique pour approfondir la compréhension de chacun des paramètres de style de la souris.
<span style=cursor:hand> main : est une forme de main familière. </span>
< span style=cursor:crosshair>crosshair : Il s'agit d'un réticule, qui est le style utilisé sur la page d'accueil de Little Turtle. </span>
< span style=cursor:text>text : est le style dans lequel la souris est généralement déplacée vers le texte. < /span>
< span style=cursor:wait>wait : est l'effet de l'attente. < /span>
< span style=cursor:default>default : est l'effet par défaut. </span>
< span style=cursor:help>help : est un style de souris avec un point d'interrogation. < /span>
< span style=cursor:e-resize>e-resize : est une flèche vers la droite. </span>
< span style=cursor:ne-resize>ne-resize : est une flèche pointant vers le haut vers la droite. </span>
< span style=cursor:n-resize>n-resize : est une flèche vers le haut. < /span>
< span style=cursor:nw-resize>nw-resize : est une flèche pointant vers le haut vers la gauche. < /span>
< span style=cursor:w-resize>w-resize : C'est une flèche qui passe vers la gauche. < /span>
< span style=cursor:sw-resize>sw-resize : est une flèche pointant vers le bas vers la gauche. </span>
< span style=cursor:s-resize>s-resize : est une flèche vers le bas. < /span>
< span style=cursor:se-resize>se-resize : est une flèche pointant vers le bas vers la droite. </span>
< span style=cursor:auto>auto : est l'effet automatique du système. </span>
Copiez le code ci-dessus sur votre page Web et appuyez sur F12 pour prévisualiser. Déplacez votre souris sur le texte correspondant et voyez ce qui arrive à la souris. Apparaît-il dans le style correspondant ?