`
bulote
  • 浏览: 1306241 次
文章分类
社区版块
存档分类
最新评论

CSS中cursor

阅读更多
关于cursor的说明,书上是这样讲的:

设置或检索在对象上移动的鼠标指针采用的光标形状。
此属性的值可以是多个,其间用逗号分隔。假如第一个值不可以被客户端系统理解或所指定的光标无法找到及显示,则第二个值将被尝试使用。依此类推。假如全部值都不可用的话,则此属性不会发生作用。光标不会被改变。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 cursor 。


这个属性主要是修改鼠标移上页面某一元素,所表现出来的形状。用来引导用户,见到鼠标的形状马上知道这一元素是什么类型的元素,如:小手,很清楚知道那是一个超级连接,等。
示例:
p { cursor: text; }
a { cursor: pointer; }
body { cursor: url("mycursor.gif"), url("images/cursors/footcursor.jpg"), default; }



下面这个粉红色的代码是我今天做下拉菜单在CSS样式表中的写法。写法很简单,但是学习的东西一定要详细的知道是什么样子!所以也贴出来!!
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 14px;
cursor: default;
width: auto;
}



语法:
cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )




取值:
auto :
默认值。浏览器根据当前情况自动确定鼠标光标类型。
all-scroll :
IE6.0 有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
col-resize :IE6.0 有左右两个箭头中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
crosshair :
简单的十字线光标。
default :
客户端平台的默认光标。通常是一个箭头。
hand :
竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
move :
十字箭头光标。用于标示对象可被移动。
help :
带有问号标记的箭头。用于标示有帮助信息存在。
no-drop :
IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
not-allowed :
IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
pointer :
IE6.0 和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
progress :
IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
row-resize :
IE6.0 有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
text :
用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
vertical-text :
IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
wait :
用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
*-resize :
用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
url ( url ) :
IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。
分享到:
评论

相关推荐

    CSS-cursor鼠标样式一览表

    此文档包含了CSS中cursor属性对应的鼠标图片与说明

    CSS中cursor属性的鼠标样式明细

    CSS中cursor属性的鼠标样式有哪些?本文整理了一些,可供大家使用,感兴趣的朋友也可以参考下

    鼠标特效css的cursor属性

    鼠标特效用css的cursor属性控制形状

    前端开源库-css-cursor

    前端开源库-css-cursorCSS光标,规范化CSS光标的值

    举例详解CSS中的cursor属性

    CSS3的领域范围已经渗透到了cursor属性(鼠标手形)。这里简单介绍两个相当实用的组合zoom-in/zoom-out以及grab/grabbing. 本文重在展示,开阔眼界。二、zoom-in/zoom-out组合 zoom-in/zoom-out可以让元素的鼠标形状...

    css cursor 的可选值(鼠标的各种样式)

    The cursor render as a crosshair游标表现为十字准线 cursor: pointer; cursor: hand;写两个是为了照顾IE5,它只认hand。   手 The cursor render as a pointer (a hand) that indicates a link游标以暗示...

    全屏幻灯片JQ+JS+CSS3

    cursor: pointer;margin-right: 6px;border: #414140 2px solid;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px} #slideshow .btns b i: hover{background: #a7a7a6} #slideshow .btns b i...

    兼做美工之导航条制作过程分享

    主要是css中cursor差异性(其他做的过程中忘了): cursor在ie6很奇怪,我开始在li层设置鼠标形状为手指,ie6显示无效,向复层的ul,div设置都无效,后来试了设置了li里面的div,奇迹出现了,鼠标手指出现了,这里我...

    div+css有实例,易学易懂

    6.5.5 cursor 属性 第7 章 CSS 容器属性 7.1 什么是盒模型 7.1.1 内容与盒模型 7.1.2 背景与盒模型 7.2 补白属性 7.2.1 补白属性详解 7.2.2 百分比值的使用 7.2.3 单侧的补白属性 7.2.4 补白属性的简写 7.3 边框属性...

    javascript-css3-lookup:JS的实用程序类,它显示CSS3中的所有可用属性值

    css3是CSS3属性的查找实用程序,可在JavaScript中编写内联样式时使用。 这是一个简单的对象,其中包含大多数CSS3属性的大多数常用选项。 用法 安装后,按如下所示导入实用程序: import { css3 } from '@toolz/...

    零基础学HTML CSS源代码

    style1.css 名为style1的CSS样式文件。 style2.css 名为style2的CSS样式文件。 style3.css 名为style3的CSS样式文件。 第16章(源代码\第16章) 示例描述:本章演示字体属性用法。 间距与间隔....

    js或者css自动格式化

    在下面的几个选项中,"action"选择“run as text filter(replace fixed cursor)” 3)其它几个的安装方式与jsFormat的安装类似,这里不再重复。 点击菜单tools ,你会发现在tools下方有:jsFormat Ctrl+1。选中一段...

    CSS自适应宽度圆角按钮

    cursor:hand; margin:0 5px 0 0;} a:hover{background:url(41205957519.gif) left 30px;height:30px;} a span{background:url(41205957519.gif) right 0; padding:9px 8px 5px 0; margin:0 0 0 8px; float:left; ...

    css鼠标样式cursor介绍(鼠标手型)

    巧合要用到鼠标样式效果,就顺便整理了下十五种CSS 鼠标样式,小例子供大家使用啊

    前端项目-jquery-awesome-cursor.zip

    前端项目-jquery-awesome-cursor,jQuery plugin for using FontAwesome icons as custom CSS cursors

    postcss-basecss:PostCSS插件,它提取基本CSS规则以将它们内联到index.html中,类似于关键CSS

    插件,它提取基本CSS规则以将它们内联到index.html中,类似于关键CSS。 安装 npm install postcss-basecss --save 用法 postcss ( [ require ( 'postcss-basecss' ) ( options ) ] ) 选项 默认选项: { cssFile :...

    css中子元素设置margin-top为什么影响了父元素

    本文介绍了css中子元素设置margin-top为什么影响了父元素,分享给大家,具体如下: <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto;... cursor:

Global site tag (gtag.js) - Google Analytics