Masquer le curseur sur les pages Web à l'aide de CSS et JavaScript-tutoriel CSS-php.cn

Masquer le curseur sur les pages Web à l'aide de CSS et JavaScript

PHPz

Libérer： 2023-09-17 19:53:03

avant

752 Les gens l'ont consulté

使用 CSS 和 JavaScript 隐藏网页上的光标

Dans ce tutoriel, nous apprendrons à masquer le curseur dans une page Web en utilisant CSS et JavaScript. Parfois, nous devons créer un curseur stylé, puis masquer le curseur. Il est peut-être également nécessaire de masquer le curseur pour des éléments HTML spécifiques.

Il existe deux façons de masquer le curseur sur les pages Web. L'un utilise CSS et l'autre utilise JavaScript. Nous apprendrons les deux méthodes une par une dans ce tutoriel.

Masquer le curseur sur les pages Web en utilisant CSS

CSS nous permet de changer le style du curseur. Nous pouvons créer différents types de curseurs en utilisant CSS. Si nous ne voulons pas afficher le curseur, nous pouvons appliquer le style "cursor: none" à un élément HTML spécifique.

Grammaire

Les utilisateurs peuvent masquer le curseur en utilisant CSS selon la syntaxe suivante.

CSS Selector {
   cursor: none;
}

Copier après la connexion

Exemple

Dans cet exemple, nous avons créé l'élément div et spécifié la hauteur et la largeur correctes. De plus, nous appliquons une couleur d'arrière-plan rouge au div en utilisant CSS. Après cela, nous ajoutons l'attribut class à l'élément div et l'initialisons avec la valeur "test".

Nous utilisons le nom de la classe de test comme sélecteur CSS en CSS et appliquons le style "cursor: none" à l'élément div.

<html>
<head>
   <style>
      .test {
         /* style to hide the cursor */
         cursor: none;
         height: 300px;
         width: 300px;
         background-color: red;
      }
   </style>
</head>
<body>
   <h2>
      Hiding the cursor using <i> CSS. </i>
   </h2>
   <!-- hiding the cursor in this div element -->
   <div class="test">Hiding the cursor for this div.</div>
</body>
</html>

Copier après la connexion

Dans la sortie ci-dessus, l'utilisateur peut observer que le curseur disparaît lorsqu'il déplace le curseur dans l'élément div.

Masquer le curseur sur les pages Web à l'aide de JavaScript

Nous pouvons utiliser JavaScript pour changer le style de n'importe quel élément HTML . Chaque élément HTML contient un attribut de style, auquel nous pouvons accéder en passant l'élément HTML comme référence. Ensuite, nous pouvons accéder à la propriété de style spécifique de l'attribut style et modifier sa valeur. Ici, nous utiliserons JavaScript pour changer la valeur de l'attribut cursor sur none.

Grammaire

Les utilisateurs peuvent utiliser JavaScript pour masquer le curseur sur les pages Web selon la syntaxe suivante.

let testDiv = document.getElementById("test");
testDiv.style.cursor = "none";

Copier après la connexion

Dans la syntaxe ci-dessus, style est un attribut de l'élément testDiv et le curseur est un attribut de l'objet style. Nous changeons la valeur de la propriété du curseur en "aucun".