如何点击按钮，将鼠标变成等待状态(沙漏)！

html-css013

如何点击按钮，将鼠标变成等待状态(沙漏)！,第1张

这是 CSS 中的 cursor，你说的沙漏是 cursor 的状态为 wait（等待）

这是根据操作系统来定的，Windows XP 是沙漏，Windows 7 变成一个蓝色的圈

<script type="text/javascript">

window.onload = function() {

document.getElementById("btn").onclick = function() {

if(document.body.style.cursor === "wait")

// 箭头 (默认)

document.body.style.cursor = "default"

else

// 沙漏 (等待)

document.body.style.cursor = "wait"

}

}

</script> <input type="button" id="btn" value="BUTTON" />

如果你想在所有操作系统中都是用同样的鼠标指针，那你需要用软件自己做一个，然后使用 url，IE 支持 cur 格式，其它浏览器都支持 png 格式。

在CSS中定义鼠标样式的方法为：

{cursor: url('路径/*.cur')}

然后看你想把这个鼠标样式定义到哪里就加什么标签。

通篇用，就定义boby{cursor: url('路径/*.cur')}

定义链接就用a{cursor: url('路径/*.cur')}

别的局部地方用就用别的名称，等等，总之和别的样式调用方法是一样的，可以在页面的任意地方指定不同的鼠标样式。

cursor 属性规定要显示的光标的类型（形状）。

url

需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。

default默认光标（通常是一个箭头）

auto默认。浏览器设置的光标。

crosshair光标呈现为十字线。

pointer光标呈现为指示链接的指针（一只手）

move此光标指示某对象可被移动。

e-resize此光标指示矩形框的边缘可被向右（东）移动。

ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。

nw-resize此光标指示矩形框的边缘可被向上及向左移动（北/西）。

n-resize此光标指示矩形框的边缘可被向上（北）移动。

se-resize此光标指示矩形框的边缘可被向下及向右移动（南/东）。

sw-resize此光标指示矩形框的边缘可被向下及向左移动（南/西）。

s-resize此光标指示矩形框的边缘可被向下移动（南）。

w-resize此光标指示矩形框的边缘可被向左移动（西）。

text此光标指示文本。

wait此光标指示程序正忙（通常是一只表或沙漏）。

help此光标指示可用的帮助（通常是一个问号或一个气球）。