首页 > 代码库 > 用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定义不同的鼠标光标样式