用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 选择器及各样式引用方式介绍

时间: 2025-01-05 11:11:08

用Css定义不同的鼠标光标样式的相关文章

css Cursor:url()自定义鼠标指针样式为图片

css自定义鼠标指针样式为图片Cursor:url()的使用,今天在项目中,要用到自定义鼠标样式,格式: css:{cursor:url('绝对路径的图片(格式:cur,ico)'),-moz-zoom-out;}//FF下面 css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以 前面url是自定义鼠标格式,图像的绝对路径地址,后面的参数是css标准的cursor样式,(IE下面可以不需要) 图标的格式根据不同的浏览器来分:IE支持cur,ani,

html鼠标光标样式

1 <span style="cursor:pointer">手形</span> 2 <span style="cursor:crosshair">十字</span> 3 <span style="cursor:text" >文本光标</span> 4 <span style="cursor:wait" >等待</span> 5 &

CSS cursor 属性改变鼠标的样式

可能的值 值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器设置的光标. crosshair 光标呈现为十字线. pointer 光标呈现为指示链接的指针(一只手) move 此光标指示某对象可被移动. e-resize 此光标指示矩形框的边缘可被向右(东)移动. ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东). nw-re

CSS自定义鼠标指针样式

原文链接: http://davidwalsh.name/css-custom-cursorDemo地址: http://davidwalsh.name/demo/css-custom-cursor.php原文日期: 2014-09-16翻译日期: 2014-09-17翻译人员: 铁锚 还记得Web 1.0时代的那些苦逼岁月吗? 你想尽一切办法来优化你的网站. 还要饱受IE6惨无人道的虐待,举个栗子, IE中那些害死人不偿命的滚动条, 我一直记得第三方类库 CometCursor. CometC

用图片替代cursor光标样式

鼠标光标样式有限,可参考http://css-cursor.techstream.org/,自定义光标样式可用设置cursor:url('xxx.cur',auto;),可是老是不生效,不知什么原因.那怎么办呢?还有一种办法,就是用图片替代鼠标光标,下面就介绍如何使用之. 1.制作光标图片(ps等工具),注意不要用白底,用透明底,透明底一般为gif或者png格式图片. 图1 我做的箭头图片32*32px 2.用一个span标签包含图片 <span id="cursorLRArrow&quo

CSS中cursor 鼠标指针光标样式(形状)

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 常用cursor光标 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头)auto 默认.浏览器设置的光标.crosshair 光标呈现为十字线.pointer 光标呈现为指示链接的指针(一只手)move 此光标指示某对象可被

css cursor鼠标指针光标样式default pointer hand url

我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制.系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式. 详见网站介绍:http://www.divcss5.com/rumen/r427.shtml css cursor鼠标指针光标样式default pointer hand url,布布扣,bubuko

【css】cursor鼠标指针光标样式知识整理

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 1 div( cursor:default;} //默认正常鼠标指针 2 div( hand;}和div( cursor:text;} //文本选择效果 3 div( cursor:move;} //移动选择效果 4 div( cursor:pointer;} //手指形状 5 div( cursor:url("

第5章—通过CSS定义链接样式

5.1针对链接的CSS基本概念: 5.1.1 CSS伪类别 5.1.2 用伪类别定义动态超链接 5.2定义丰富的超链特效 5.2.1给链接添加提示文字:title属性 5.2.2按钮式超链接 5.2.3 为超链添加背景图效果 background-image:url(nav01.jpg); 5.2.4 用CSS定义针对超链的鼠标特效 cursor:鼠标各种样式及大小的设置