码迷,mamicode.com
首页 > Web开发 > 详细

用Css定义不同的鼠标光标样式

时间:2014-10-13 18:15:51      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   os   ar   sp   on   log   

  • 系统光标大家再熟悉不过了,熟悉的甚至忘了它们的存在。用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定义不同的鼠标光标样式

标签:style   blog   http   io   os   ar   sp   on   log   

原文地址:http://www.cnblogs.com/LuckZ/p/4022451.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!