分享

用CSS定义个性化鼠标指针-CSS在线

 阡陌小曼 2010-01-11

用CSS定义个性化鼠标指针

来源:CssCss.org 更新时间:09/06/14 点击: 256

在许多网站上我们可以看到很个性的鼠标指针(cursor),在网页设计中用CSS可以方便的实现这样个性鼠标指针的效果,该CSS属性就是"cursor"属性。

首先我们介绍一下系统自带的15个鼠标效果:

一般而言,鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手型。但用css可控制鼠标的显示效果,如可使鼠标移到普通文本上也显示成手型。  

用css控制的语法如下: 

[CSS在线]-示例代码<span style="cursor:*">文本或其它页面元素</span>
 

把 * 换成如下15个效果的一种: 

hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize和auto。 

下面是对这15种效果的解释。移动鼠标到解释上面,看看你的鼠标起了什么变化吧! 
hand是手型 
crosshair是十字型 
text是移动到文本上的那种效果 
wait是等待的那种效果 
default是默认效果 
help是问号 
e-resize是向右的箭头 
ne-resize是向右上的箭头 
n-resize是向上的箭头 
nw-resize是向左上的箭头 
w-resize是向左的箭头 
sw-resize是左下的箭头 
s-resize是向下的箭头 
se-resize是向右下的箭头 
auto是由系统自动给出效果

除了系统自带的15种鼠标效果外我们还可以自定义自己的鼠标形状,首先我们要将我们要作为鼠标图形的图片存为.cur或者.ani格式文件。

然后在CSS种运用,如下:

[CSS在线]-示例代码cursor:url(images/mycursor.cur);

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多