web-dev-qa-db-ger.com

Ändern Sie den Mauszeiger mit JavaScript

Ich wollte ein Skript verwenden, um den Mauszeiger auf meiner Website mithilfe von JavaScript zu ändern. Es wird besser von CSS erledigt, aber meine Anforderung ist ein Skript, das an viele Leute verteilt werden kann, um es in den Kopfbereich ihrer Websites einzubetten. Durch CSS kann dies durch manipuliert werden

html
{
cursor: *cursorurl*
}

Wie mache ich das gleiche in JavaScript?

31
Cipher

Javascript ist ziemlich gut darin, CSS zu manipulieren.

 document.body.style.cursor = *cursor-url*;
 //OR
 var elementToChange = document.getElementsByTagName("body")[0];
 elementToChange.style.cursor = "url('cursor url with protocol'), auto";

oder mit jquery:

$("html").css("cursor: url('cursor url with protocol'), auto");

Firefox funktioniert nicht , es sei denn, Sie geben einen Standardcursor nach dem abgebildeten an!

andere Cursor-Schlüsselwörter

Denken Sie auch daran, dass IE6 nur .cur- und .ani-Cursor unterstützt.

Wenn sich der Cursor nicht ändert: Wenn Sie das Element unter dem Cursor relativ zur Cursorposition bewegen (z. B. Element ziehen), müssen Sie a erzwingen auf dem Element neu zeichnen:

// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';
// in jquery
$('#parentOfElementToBeRedrawn').hide().show(0);

working sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>First jQuery-Enabled Page</title>
<style type="text/css">

div {
    height: 100px;
    width: 1000px;
    background-color: red;
}

</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script></head>
<body>
<div>
hello with a fancy cursor!
</div>
</body>
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.cursor = "url('http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur'), auto";


</script>
</html>
38
document.body.style.cursor = 'cursorurl';
13
Wally Atkins

Schauen Sie sich diese Seite an: http://www.webcodingtech.com/javascript/change-cursor.php . Sieht so aus, als könnten Sie stillos auf den Cursor zugreifen. Diese Seite zeigt, wie es mit der gesamten Seite gemacht wird, aber ich bin sicher, dass ein untergeordnetes Element genauso gut funktionieren würde.

document.body.style.cursor = 'wait';
8
Brian Ball