Maison >interface Web >tutoriel CSS >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:03727parcourir
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!