Maison > Article > interface Web > Comment définir le style du curseur sur le pointeur du lien sans href ?

Comment définir le style du curseur sur le pointeur du lien sans href ?

王林avant: 2023-08-24 12:13:02609parcourir

如何将光标样式设置为没有 href 的链接的指针？

Nous pouvons utiliser la balise en HTML pour ajouter des liens vers des pages Web. Le style de curseur par défaut pour l'élément est le pointeur, mais la suppression de l'attribut href de la balise modifie le style du curseur.

Donc, dans ce tutoriel, nous apprendrons à conserver le style du curseur comme pointeur marqué sans attribut href.

Les utilisateurs peuvent suivre l'exemple ci-dessous pour afficher le style de curseur par défaut des éléments

Exemple

Dans l'exemple ci-dessous, nous utilisons la balise pour créer trois liens différents.

Dans le résultat, nous pouvons observer que lorsque l'on passe la souris sur le premier lien, le curseur devient un pointeur car il contient l'attribut href ; pour le deuxième lien, le curseur devient également un pointeur car il contient également un attribut href avec une valeur de chaîne vide et lorsque nous survolons le troisième lien, le style du curseur change car il ne contient pas l'attribut href.

<html>
<body>
   <h2>Cursor pointer on the anchor texts</h2>
   <a href = "https://www.tutorialspoint.com/index.htm"> tutorialspoint</a>
   <br> <br>
   <a href = ""> Cursor pointer </a>
   <br> <br>
   <a> No cursor pointer </a>
</body>
</html>

Les utilisateurs comprennent désormais comment le style du curseur change lorsque nous supprimons l'attribut href de la balise .

Ci-dessous, nous examinerons un exemple de définition du pointeur du curseur pour un lien sans attribut href.

Grammaire

Les utilisateurs peuvent suivre la syntaxe ci-dessous et utiliser CSS pour définir le pointeur du curseur sur un lien sans l'attribut href.

<style>
  .pointer {
     cursor: pointer;
   }
</style>

Dans la syntaxe ci-dessus, "pointeur" est la classe attribuée à l'élément , et nous modifions le style du pointeur de l'élément contenant la classe "pointeur".

Exemple

Dans l'exemple ci-dessous, nous créons deux éléments différents et attribuons la classe "pointeur" aux deux éléments. Dans la section , nous avons ajouté les styles en ligne pour la page Web. Nous avons accédé à la classe « pointer » dans la balise

<html>
<head> 
   <style>
      .pointer {
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h2>Using the CSS to set the cursor pointer on the anchor texts in the link without the href attribute </h2>
   <a class = "pointer"> cursor pointer </a>
   <br> <br>
   <a class = "pointer"> No href attribute </a>
</body>
</html>

Exemple

Dans l'exemple ci-dessous, nous avons utilisé le style "cursor:pointer" pour styliser le curseur d'un élément sans attribut href en pointeur, comme le montre l'exemple 2, mais nous avons appliqué du CSS en ligne à la balise .

<html>
<body>
   <h3>Using the inline CSS to set cursor pointer on the anchor texts in the link without the href attribute. </h3>
   <a style = "cursor: pointer;"> cursor pointer </a>
</body>
</html>

Exemple

Dans l'exemple ci-dessous, nous utilisons l'attribut d'événement "onmouseover". Chaque fois que le pointeur de la souris passe sur le marqueur , il appelle la fonction de rappel qui lui est assignée. Ici, au lieu d'attribuer une fonction de rappel, nous attribuons une ligne de CSS.

Ainsi, chaque fois que l'utilisateur survole une balise sans attribut href, le style du curseur sera défini sur pointeur.

<html>
<body>
   <h3>Using the onmouseover event and css to add cursor pointer on the anchor texts in the link without herf attribute </h3>
   <a onmouseover = "this.style.cursor='pointer'"> Link 1 </a> <br>
   <a onmouseover = "this.style.cursor='pointer'"> Link 2 </a> <br>
   <a onmouseover = "this.style.cursor='pointer'"> Link 3 </a> <br>
   <a onmouseover = "this.style.cursor='pointer'"> Link 4 </a> <br>
</body>
</html>

Exemple

Dans l'exemple ci-dessous, nous avons utilisé la balise avec l'attribut href, mais nous avons attribué une chaîne vide comme valeur de l'attribut href. Par conséquent, il agit automatiquement comme un lien nul et définit le pointeur du curseur pour la balise .

<html>
<body>
   <h3>Assigning the empty value to the href attribute to add cursor pointer </i> on the anchor texts</h3>
   <a href = ""> Link 1 </a> <br>
   <a href = ""> Link 2 </a> <br>
</body>
</html>

Dans ce tutoriel, nous avons appris à styliser le curseur comme un pointeur sur un lien sans l'attribut href. Nous utilisons CSS pour changer le style du curseur. De plus, nous utilisons l'attribut d'événement onmouseover pour détecter les événements de survol de la souris et modifier le style du curseur en conséquence.

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：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment ajouter Summernote Editor à une page Web en utilisant Javascript ?Article suivant：Comment ajouter Summernote Editor à une page Web en utilisant Javascript ?

Articles Liés

Voir plus