您的位置:首页 > Web前端 > CSS

CSS自定义鼠标形状

2013-12-19 18:34 316 查看
在 IE 下设置鼠标为手型的方法: cursor: hand,但是在 FIREFOX 中是无效的,解决方法是在FIREFOX中设置: cursor: pointer. 而这个pointer 值在IE和FIREFOX 下都是通用的,所以我们使用: cursor:pointer 就可以了
在 IE 下设置鼠标为手型的方法: cursor: hand,但是在 FIREFOX 中是无效的,解决方法是在FIREFOX中设置: cursor: pointer. 而这个pointer 值在IE和FIREFOX 下都是通用的,所以我们使用: cursor:pointer 就可以了
一般而言,鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手型。但用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-size是向右的箭头

  ne-resize是向右上的箭头

  n-resize是向上的箭头

  nw-resize是向左上的箭头

  w-resize是向左的箭头

  sw-resize是左下的箭头

  s-resize是向下的箭头

  se-resize是向右下的箭头

  auto是由系统自动给出效果
<style type="text/css">

<!-- 

span {display:block;line-height:30px;margin:5px 0;background:#f0f0f0;text-align:center;}

-->

</style>

<span style="cursor:hand;">hand 手型</span>

<span style="cursor:crosshair;">crosshair 十字</span>

<span style="cursor:text;">text 文本</span>

<span style="cursor:wait;">wait 等待</span>

<span style="cursor:help;">help 问号</span>

<span style="cursor:e-resize;">e-resize 右的箭头</span>

<span style="cursor:ne-resize;">ne-resize 右上的箭头</span>

<span style="cursor:n-resize;">n-resize 上的箭头</span>

<span style="cursor:nw-resize;">nw-resize 左上的箭头</span>

<span style="cursor:w-resize;">w-resize 左的箭头</span>

<span style="cursor:sw-resize;">sw-resize 左下的箭头</span>

<span style="cursor:s-resize;">s-resize 下的箭头</span>

<span style="cursor:se-resize;">se-resize 右下的箭头</span>

<span style="cursor:move;">move 移动</span>

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: