Maison > Article > interface Web > Masquer le curseur sur les pages Web à l'aide de CSS et JavaScript

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

PHPzavant: 2023-09-17 19:53:03700parcourir

使用 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;
}

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>

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";

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".

Exemple

Dans l'exemple ci-dessous, nous avons accédé à l'élément HTML div via l'identifiant dans la balise <script>. Après cela, nous devons changer la valeur de la propriété du curseur de son objet de style en "aucun" pour masquer le curseur dans cet élément div particulier. </script>

<html>
<head>
   <style>
      .test {
         height: 300px;
         width: 300px;
         background-color: blue;
      }
   </style>
</head>
<body>
   <h2>Hiding the cursor using <i>JavaScript.</i></h2>
   <div class="test" id="test">Hiding the cursor for this div.</div>
   </br>
   <button onClick="HideCursor()">Hide cursor on Div</button> 
   <script>
      
      // Accessing the HTML element by id
      let testDiv = document.getElementById("test");
      function HideCursor() {
         
         // hiding the cursor
         testDiv.style.cursor = "none";
      }
   </script>
</body>
</html>

Dans la sortie ci-dessus, lorsque l'utilisateur clique sur le bouton "Masquer le curseur sur Div", il masque le curseur sur l'élément div.

Nous avons appris deux façons de masquer le curseur sur des éléments HTML spécifiques sur une page Web. Les utilisateurs peuvent utiliser l'une de ces méthodes selon qu'ils souhaitent modifier le style du curseur en CSS ou en JavaScript.

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!

JavaScript css html class 对象选择器

Déclaration：

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

Article précédent：Comment faire fonctionner les flèches personnalisées de la barre de défilement sur les appareils mobiles ?Article suivant：Comment faire fonctionner les flèches personnalisées de la barre de défilement sur les appareils mobiles ?

Articles Liés

Voir plus