首页 > 代码库 > 用Css定义不同的鼠标光标样式
用Css定义不同的鼠标光标样式
- 系统光标大家再熟悉不过了，熟悉的甚至忘了它们的存在。用CSS我们可以将这些光标一一展现出来，本例将展现给大家用CSS实现拖动符的光标、链接小手、移动光标、带问号的光标、不可操作的光标、小手光标、带运行符的光标、上下拖动的光标、普通打字光标、竖向排行的文字光标、系统忙的光标等。
<!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>
<title>css定义鼠标光标</title>
<style>
.p1{
cursor:auto;
}
.p2{
cursor:crosshair;
}
.p2{
cursor:col-resize;
}
.p3{
cursor:default;
}
.p4{
cursor:hand;
}
.p5{
cursor: move;
}
.p6{
cursor:help;
}
.p7{
cursor:no-drop;
}
.p8{
cursor:not-allowed;
}
.p9{
cursor:pointer;
}
.p10{
cursor:progress;
}
.p11{
cursor:row-resize;
}
.p12{
cursor:text;
}
.p13{
cursor:vertical-text;
}
.p14{
cursor:wait;
}
p{
height:20px;
background:#999999;
border:1px solid #000000;
margin:0 0 10px 0;
}
</style>
</head>
<body>
<p class="p1">光标效果</p>
<p class="p2">拖动符效果</p>
<p class="p3">无效果</p>
<p class="p4">链接小手</p>
<p class="p5">移动光标</p>
<p class="p6">带问号的光标</p>
<p class="p7">不可操作的光标</p>
<p class="p8">不可操作的</p>
<p class="p9">小手</p>
<p class="p10">带运行符的光标</p>
<p class="p11">上下拖动的光标</p>
<p class="p12">普通打字光标</p>
<p class="p13">竖向排行的文字光标</p>
<p class="p14">系统忙的光标</p>
</body>
</html>
转自：http://www.codefans.net/jscss/code/2268.shtml
http://www.cnblogs.com/polk6/p/3142142.html （CSS 选择器及各样式引用方式介绍）
用Css定义不同的鼠标光标样式