使用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>

TAGS:鼠标光标样式

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/15.html转载请标注此链接

文章推荐
七日热点
热力推荐
网站统计
文章总数:126
今天发布:1
软件资源数:17