- 本栏最新文章
- 如何用CSS自定义鼠标显示的形状？ 04-01
- 如何实现多风格选择 样式实时切换？ 04-01
- css样式教学--实时切换网页的CSS样式实现 04-01
- css样式教学--用CSS设计高用户体验的web文字大小 04-01
- css样式教学--网页制作之常用CSS缩写语法总结 04-01
- css样式教学--XHTML+CSS兼容性解决方案小集 04-01
- 不规则文字排版的CSS样式如何定义？ 03-27
- 如何用css控制一个容器的显示与隐藏？ 03-27
- 如何实现未知高居垂直居中？ 03-27
- IE7新支持的CSS选择器有哪些？ 03-27
- 本栏推荐文章
- Photoshop教程：水灵灵的美女调出来 12-30
- AS3与后台交互 12-21
- AS3通俗教程---AS3自身loading制作 12-19
如何用CSS自定义鼠标显示的形状？
简介： 我们在网页设计的时候，为了达到个性效果，需要将系统默认的鼠标形状改变掉，自宝义鼠标显示的形状，我们以前可以用javascript来实现。现在我们完全可以用css来实现这一个性效果了。 CSS有一个属性：curso ...
关键字：CSS自定义
我们在网页设计的时候，为了达到个性效果，需要将系统默认的鼠标形状改变掉，自宝义鼠标显示的形状，我们以前可以用javascript来实现。现在我们完全可以用css来实现这一个性效果了。
CSS有一个属性：cursor，其作用是设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。更多关于cursor请参考这里。
我们看下面的实例，更好的理解如何用CSS自定义鼠标显示的形状。
Source Code to Run [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.52css.com</title>
<style type="text/css">
<!--
span {display:block;line-height:30px;margin:5px 0;background:#f0f0f0;text-align:center;}
-->
</style>
</head>
<body>
<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>
</body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
CSS有一个属性：cursor，其作用是设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。更多关于cursor请参考这里。
我们看下面的实例，更好的理解如何用CSS自定义鼠标显示的形状。
Source Code to Run [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.52css.com</title>
<style type="text/css">
<!--
span {display:block;line-height:30px;margin:5px 0;background:#f0f0f0;text-align:center;}
-->
</style>
</head>
<body>
<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>
</body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
