使用CSS定义鼠标光标样式
作者：Davidszhou 来源:Davidszhou博客 时间:2015-04-02 21:12:43 点击： 公司首页底部由于建立了几个相关话题的专题页面和不同地区的专题页面，再加上底部的友情链接，总觉得底部太臃肿，需要弄一个tab标签切换代码，修改测试好之后，发现每次鼠标移动到个tab标签上面鼠标没有改变成手指的一样，在网上找了一下，可以使用CSS：cursor 属性：
cursor属性：规定要显示的光标的类型（形状）。如果想给哪块设置CSS鼠标光标样式，可以直接添加相应的规则即可，下面列举出的代码是直接给li添加了鼠标光标属性：
|
值
|
描述
|
|
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
|
此光标指示可用的帮助（通常是一个问号或一个气球）。
|
下面是一段自己写的做测试效果用的代码：（可以复制到HTML文件查看具体效果）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用CSS定义鼠标光标样式</title>
</head>
<style type="text/css">
#shubiao { width:500px; height:auto; margin:auto; border:#666 solid 1px; padding:3px;}
#shubiao ul { margin:0px; padding:0px; list-style:decimal inside;}
#shubiao ul li { width:500px; height:30px; line-height:30px;}
.a {cursor:default;}
.b { cursor:auto;}
.c { cursor:crosshair;}
.d { cursor:pointer;}
.e { cursor:move;}
.f { cursor:e-resize;}
.g { cursor:ne-resize;}
.h { cursor:nw-resize;}
.i { cursor:n-resize;}
.j { cursor:se-resize;}
.k { cursor:sw-resize;}
.l { cursor:s-resize;}
.m { cursor:w-resize;}
.n { cursor:text;}
.o { cursor:wait;}
.p { cursor:help;}
</style>
<body>
<div id="shubiao">
<ul>
<li class="a">默认光标（通常是一个箭头）</li>
<li class="b">默认。浏览器设置的光标。</li>
<li class="c">光标呈现为十字线。</li>
<li class="d">光标呈现为指示链接的指针（一只手）</li>
<li class="e">此光标指示某对象可被移动。</li>
<li class="f">此光标指示矩形框的边缘可被向右（东）移动。</li>
<li class="g">此光标指示矩形框的边缘可被向上及向右移动（北/东）。</li>
<li class="h">此光标指示矩形框的边缘可被向上及向左移动（北/西）。</li>
<li class="i">此光标指示矩形框的边缘可被向上（北）移动。</li>
<li class="j">此光标指示矩形框的边缘可被向下及向右移动（南/东）。</li>
<li class="k">此光标指示矩形框的边缘可被向下及向左移动（南/西）。</li>
<li class="l">此光标指示矩形框的边缘可被向下移动（南）。</li>
<li class="m">此光标指示矩形框的边缘可被向左移动（西）。</li>
<li class="n">此光标指示文本。</li>
<li class="o">此光标指示程序正忙（通常是一只表或沙漏）。</li>
<li class="p">此光标指示可用的帮助（通常是一个问号或一个气球）。</li>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用CSS定义鼠标光标样式</title>
</head>
<style type="text/css">
#shubiao { width:500px; height:auto; margin:auto; border:#666 solid 1px; padding:3px;}
#shubiao ul { margin:0px; padding:0px; list-style:decimal inside;}
#shubiao ul li { width:500px; height:30px; line-height:30px;}
.a {cursor:default;}
.b { cursor:auto;}
.c { cursor:crosshair;}
.d { cursor:pointer;}
.e { cursor:move;}
.f { cursor:e-resize;}
.g { cursor:ne-resize;}
.h { cursor:nw-resize;}
.i { cursor:n-resize;}
.j { cursor:se-resize;}
.k { cursor:sw-resize;}
.l { cursor:s-resize;}
.m { cursor:w-resize;}
.n { cursor:text;}
.o { cursor:wait;}
.p { cursor:help;}
</style>
<body>
<div id="shubiao">
<ul>
<li class="a">默认光标（通常是一个箭头）</li>
<li class="b">默认。浏览器设置的光标。</li>
<li class="c">光标呈现为十字线。</li>
<li class="d">光标呈现为指示链接的指针（一只手）</li>
<li class="e">此光标指示某对象可被移动。</li>
<li class="f">此光标指示矩形框的边缘可被向右（东）移动。</li>
<li class="g">此光标指示矩形框的边缘可被向上及向右移动（北/东）。</li>
<li class="h">此光标指示矩形框的边缘可被向上及向左移动（北/西）。</li>
<li class="i">此光标指示矩形框的边缘可被向上（北）移动。</li>
<li class="j">此光标指示矩形框的边缘可被向下及向右移动（南/东）。</li>
<li class="k">此光标指示矩形框的边缘可被向下及向左移动（南/西）。</li>
<li class="l">此光标指示矩形框的边缘可被向下移动（南）。</li>
<li class="m">此光标指示矩形框的边缘可被向左移动（西）。</li>
<li class="n">此光标指示文本。</li>
<li class="o">此光标指示程序正忙（通常是一只表或沙漏）。</li>
<li class="p">此光标指示可用的帮助（通常是一个问号或一个气球）。</li>
</div>
</body>
</html>
TAGS:鼠标光标样式
来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/15.html转载请标注此链接
文章推荐
- 七日热点
- 热力推荐
- TAGS 列表
- 网站统计
- 文章总数：138
- 今天发布：0
- 软件资源数：20
- 友情连接：()
Davids zhou | 站点地图 | | | 皖ICP备14017762号 如有侵犯您权利点击上面QQ -Powered By 帝国CMS -davids.zhou#qq.com(#换@)
Davidszhou个人博客主要记录在网站建设、SEO优化、python开发、PHP开发中遇到问题记录保存，作为他人参考学习教程
