Style.cursor especifica el cursor del mouse que se mostrará cuando se apunte sobre un elemento.
Algunos de los punteros del mouse son los siguientes:
- Espere
- ayuda
- Muevete
- puntero
- punto de mira
- célula
- ninguna
Sintaxis:
object.style.cursor = "nameOfCursor";
Código #1:
<html>
<body>
<p id="Cur">Move mouse over the text after clicking Change cursor button.</p>
<!-- Change Cursor button -->
<!-- Change function is called when button is Click. -->
<button type="button" onclick="Change()">Change Cursor</button>
<script>
function Change() {
// style.cursor specifies the mouse cursor to be displayed
// when pointing over an element.
document.getElementById("Cur").style.cursor = "wait";
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón Cambiar cursor-
Después de hacer clic en el botón Cambiar cursor-
Código #2:
<html>
<body>
<p id="Cur">Move mouse over the text after clicking Change cursor button.</p>
<!-- Change Cursor button -->
<!-- Change function is called when button is Click. -->
<button type="button" onclick="Change()">Change Cursor</button>
<script>
function Change() {
// style.cursor specifies the mouse cursor to be displayed
// when pointing over an element.
document.getElementById("Cur").style.cursor = "help";
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón Cambiar cursor-
Después de hacer clic en el botón Cambiar cursor.
Código #3:
<html>
<body>
<p id="Cur">Move mouse over the text after clicking Change cursor button.</p>
<!-- Change Cursor button -->
<!-- Change function is called when button is Click. -->
<button type="button" onclick="Change()">Change Cursor</button>
<script>
function Change() {
// style.cursor specifies the mouse cursor to be displayed
// when pointing over an element.
document.getElementById("Cur").style.cursor = "move";
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón Cambiar cursor-
Después de hacer clic en el botón Cambiar cursor.
Código #4:
<html>
<body>
<p id="Cur">Move mouse over the text after clicking Change cursor button.</p>
<!-- Change Cursor button -->
<!-- Change function is called when button is Click. -->
<button type="button" onclick="Change()">Change Cursor</button>
<script>
function Change() {
// style.cursor specifies the mouse cursor to be displayed
// when pointing over an element.
document.getElementById("Cur").style.cursor = "pointer";
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón Cambiar cursor-
Después de hacer clic en el botón Cambiar cursor.
Código #5:
<html>
<body>
<p id="Cur">Move mouse over the text after clicking Change cursor button.</p>
<!-- Change Cursor button -->
<!-- Change function is called when button is Click. -->
<button type="button" onclick="Change()">Change Cursor</button>
<script>
function Change() {
// style.cursor specifies the mouse cursor to be displayed
// when pointing over an element.
document.getElementById("Cur").style.cursor = "crosshair";
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón Cambiar cursor-
Después de hacer clic en el botón Cambiar cursor.
Código #6:
<html>
<body>
<p id="Cur">Move mouse over the text after clicking Change cursor button.</p>
<!-- Change Cursor button -->
<!-- Change function is called when button is Click. -->
<button type="button" onclick="Change()">Change Cursor</button>
<script>
function Change() {
// style.cursor specifies the mouse cursor to be displayed
// when pointing over an element.
document.getElementById("Cur").style.cursor = "cell";
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón Cambiar cursor-
Después de hacer clic en el botón Cambiar cursor.
Código #7:
<html>
<body>
<p id="Cur">Move mouse over the text after clicking Change cursor button.</p>
<!-- Change Cursor button -->
<!-- Change function is called when button is Click. -->
<button type="button" onclick="Change()">Change Cursor</button>
<script>
function Change() {
// style.cursor specifies the mouse cursor to be displayed
// when pointing over an element.
document.getElementById("Cur").style.cursor = "none";
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón Cambiar cursor-
Después de hacer clic en el botón Cambiar cursor.
Publicación traducida automáticamente
Artículo escrito por Naman_Garg y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA