Blenden Sie den Cursor auf Webseiten mit CSS und JavaScript aus-CSS-Tutorial-php.cn

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

In diesem Tutorial lernen wir, den Cursor auf einer Webseite mithilfe von CSS und JavaScript auszublenden. Manchmal müssen wir einen gestalteten Cursor erstellen und ihn dann ausblenden. Möglicherweise ist es auch notwendig, den Cursor für bestimmte HTML -Elemente auszublenden.

Es gibt zwei Möglichkeiten, den Cursor auf Webseiten auszublenden. Einer verwendet CSS und der andere verwendet JavaScript. In diesem Tutorial lernen wir beide Methoden einzeln kennen.

Mit CSS den Cursor auf Webseiten ausblenden

CSS ermöglicht uns, den Stil des Cursors zu ändern. Mit CSS können wir verschiedene Arten von Cursorn erstellen. Wenn wir den Cursor nicht anzeigen möchten, können wir den Stil „cursor: none“ auf ein bestimmtes HTML -Element anwenden.

Grammatik

Benutzer können den Cursor mithilfe von CSS gemäß der folgenden Syntax ausblenden.

CSS Selector {
   cursor: none;
}

Nach dem Login kopieren

Beispiel

In diesem Beispiel haben wir das div-Element erstellt und die richtige Höhe und Breite angegeben. Zusätzlich wenden wir mithilfe von CSS eine rote Hintergrundfarbe auf das Div an. Danach fügen wir das Klassenattribut zum div-Element hinzu und initialisieren es mit dem „test“-Wert.

Wir verwenden den Namen der Testklasse als CSS-Selektor in CSS und wenden den Stil „cursor: none“ auf das div-Element an.

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

Nach dem Login kopieren

In der obigen Ausgabe kann der Benutzer beobachten, dass der Cursor verschwindet, wenn der Benutzer den Cursor in das div-Element bewegt.

Verstecken Sie den Cursor auf Webseiten mit JavaScript

Wir können JavaScript verwenden, um den Stil jedes HTML -Elements zu ändern. Jedes HTML -Element enthält ein Stilattribut, auf das wir zugreifen können, indem wir das HTML -Element als Referenz übergeben. Anschließend können wir auf die spezifische Stileigenschaft des Stilattributs zugreifen und deren Wert ändern. Hier verwenden wir JavaScript, um den Wert des Attributs cursor in „Keine“ zu ändern.

Grammatik

Benutzer können den Cursor auf Webseiten mithilfe von JavaScript gemäß der folgenden Syntax ausblenden.

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

Nach dem Login kopieren

In der obigen Syntax ist style ein Attribut des testDiv-Elements und der Cursor ist ein Attribut des Style-Objekts. Wir ändern den Wert der Cursor-Eigenschaft in „none“.