CSS改网页鼠标指针、改指定元素指针（1）——代…

要实现CSS改网页鼠标指针、改指定元素指针，我们应该首先了解以下内容：

所有主流浏览器都支持 cursor 属性。

注释：Opera 9.3 和 Safari 3 不支持 url 值。

注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

定义和用法

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

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。

默认值：	auto
继承性：	yes
版本：	CSS2
JavaScript 语法：	object.style.cursor="crosshair"（可见js也可以改指针，不过选择css更加方便）

可能的值

值	描述
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	此光标指示可用的帮助（通常是一个问号或一个气球）。

以上的内容来自w3c，已经非常详细了，但博主在实践过程中，总结出这么几点：

1.css语法：

element {
//element可以换成所有可能的元素以实现更改指定元素的指针
        cursor:kind;
//kind可以替换成上面“可能的值”一表中的所有值（除url）以外
}

2.cursor的url值→实现自定义样式

1 body {
2        cursor:url("任何可以的.ico、.ani、.cur或其他图片地址"),auto;
3 }

",auto"是必要的以防url地址不可用，丢失这个参数会导致不易查找的bug

ok，这个代码已经可以实现网页的指针被改变。

3.更加真实的指针

1 a:hover {
2        cursor:url("任何可以的.ico、.ani、.cur或其他图片地址最好与上面不同"),auto;
3 }

这将可以实现鼠标指向链接时指针变化，更接近在操作系统中一样。

很简单？快试试吧！我的下篇博文将教大家自绘自己的指针，不过会过一段时间哦，想学的话就关注我哦！ 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有