Heim >Web-Frontend >CSS-Tutorial >Blenden Sie den Cursor auf Webseiten mit CSS und JavaScript aus
Blenden Sie den Cursor auf Webseiten mit CSS und JavaScript aus
- PHPznach vorne
- 2023-09-17 19:53:03763Durchsuche
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;
}
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>
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";
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“.
Beispiel
Im folgenden Beispiel haben wir über seine ID im <script>-Tag auf das HTML-div-Element zugegriffen. Danach müssen wir den Cursor-Eigenschaftswert seines Stilobjekts auf „none“ ändern, um den Cursor in diesem bestimmten div-Element auszublenden. </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>
Wenn der Benutzer in der obigen Ausgabe auf die Schaltfläche „Cursor auf Div ausblenden“ klickt, wird der Cursor auf dem Div-Element ausgeblendet.
Wir haben zwei Möglichkeiten kennengelernt, den Cursor auf bestimmten HTML-Elementen auf einer Webseite auszublenden. Benutzer können eine dieser Methoden verwenden, je nachdem, ob sie den Cursorstil von CSS oder JavaScript ändern möchten.
Das obige ist der detaillierte Inhalt vonBlenden Sie den Cursor auf Webseiten mit CSS und JavaScript aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!