`
xiaobashagua
  • 浏览: 12759 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

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

    博客分类:
  • js
js 
阅读更多

crosshair;

 

十字准心

The cursor render as a crosshair
游标表现为十字准线

cursor: pointer;
cursor: hand;
写两个是为了照顾IE5,它只认hand。

 

The cursor render as a pointer (a hand) that indicates a link
游标以暗示(手指)的形式来表明有一个连接

cursor: wait;

 

等待/沙漏

The cursor indicates that the program is busy (often a watch or an hourglass)
游标暗示当前程序正忙(一般为一块表或是一个沙漏)

cursor: help;

 

帮助

The cursor indicates that help is available (often a question mark or a balloon)
游标暗示当前位置可得到帮助(一般为问号或是气球)

cursor: no-drop;

 

无法释放

cursor: no-drop;

cursor: text;

 

文字/编辑

The cursor indicates text
游标暗示当前所处位置为文字内容

cursor: move;

 

可移动对象

The cursor indicates something that should be moved
游标暗示一些东西应该被移动

cursor: n-resize;

 

向上改变大小(North)

The cursor indicates that an edge of a box is to be moved up (north)
边缘可向上移动(北)

cursor: s-resize;

 

向下改变大小(South)

The cursor indicates that an edge of a box is to be moved down (south)
边缘可向下方移动(南)

cursor: e-resize;

 

向右改变大小(East)

The cursor indicates that an edge of a box is to be moved right (east)
box边缘可向右(东)边移动

cursor: w-resize;

 

向左改变大小(West)

The cursor indicates that an edge of a box is to be moved left (west)
边缘可向左移动(西)

cursor: ne-resize;

 

向上右改变大小(North East)

The cursor indicates that an edge of a box is to be moved up and right (north/east)
游标暗示box的边缘可向右上方移动(东北方向)

cursor: nw-resize;

 

向上左改变大小(North West)

The cursor indicates that an edge of a box is to be moved up and left (north/west)
边缘可向左上方移动(西北)

cursor: se-resize;

 

向下右改变大小(South East)

The cursor indicates that an edge of a box is to be moved down and right (south/east)
边缘可向右下方移动(东南)

cursor: sw-resize;

 

向下左改变大小(South West)

The cursor indicates that an edge of a box is to be moved down and left (south/west)
边缘可向左下方移动(西南)

cursor: auto;

 

自动

The browser sets a cursor
浏览器设置一个游标

cursor:not-allowed;

 

禁止

cursor:not-allowed;

cursor: progress;

 

处理中

cursor: progress;

cursor: default;

 

系统默认

The default cursor (often an arrow)
默认的游标状态(通常为一个箭头)

cursor: url(' # ');
# = 光标文件地址 (注意文件格式必须为:.cur 或 .ani)。

 

用户自定义(可用动画)

The url of a custom cursor to be used.
自定义游标的url位置

Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used
注意:在定义完自定义的游标之后在末尾加上一般性的游标,以防那些url所定义的游标不能使用

分享到:
评论

相关推荐

    CSS style属性大全.rar

    "CSS style属性大全.rar"这个压缩包显然是一份关于CSS样式的全面教程资料,旨在帮助学习者掌握各种CSS属性的用法。下面将详细介绍一些关键的CSS style属性。 1. **颜色和文本样式** - `color`: 设置文本颜色,可以...

    出现问题a is defined高手帮忙

    DragZoomUtil.style([buttonContainerDiv], {cursor: 'pointer', zIndex: 150}); // create and init the zoom button //DOM:button var buttonDiv = this.initButton_(buttonContainerDiv); // create and ...

    仿淘宝图片放大效果

    /* 边框可选 */ background-color: rgba(255, 255, 255, 0.6); /* 半透明背景 */ cursor: crosshair; /* 鼠标指针样式 */ } ``` 3. **JavaScript实现**: 使用JavaScript监听鼠标的移动事件,计算鼠标在图片...

    放大镜效果.rar

    /* 边框可选 */ width: 100px; /* 镜头大小可调整 */ height: 100px; /* 镜头大小可调整 */ border-radius: 50%; /* 镜头可以设置为圆形 */ cursor: crosshair; /* 设置鼠标样式 */ background: rgba(255, 255...

    CSS样式(规则)定义对话框中英文对照.pdf

    - `cursor`: 定义鼠标悬停在元素上时的光标形状,常用值有`default`、`pointer`、`text`等。 - `filter`: 提供了一种方法来为元素的应用或更改效果,如模糊和颜色偏移。 这个文档涵盖了诸多CSS属性和它们的作用,...

    JavaScript和css实现tab样式

    在网页设计中,Tab样式是一种常见的用户界面元素,它用于...4. 可选地,添加额外的交互效果和优化以提升用户体验。 通过这个过程,我们可以创建出一个功能完整、具有良好交互性的Tab样式,有效地组织和展示网页内容。

    js放大镜的images

    /* 可选的边框 */ background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */ cursor: none; /* 鼠标指针不显示 */ } ``` 最后,我们用JavaScript来处理事件监听和动态更新放大镜的内容。以下是一个简单的...

    js中事件的处理与浏览器对象示例介绍.docx

    `window.open()`方法用于打开新的浏览器窗口,参数分别是URL、窗口名(可选,用于同名窗口复用)、以及窗口属性字符串。 4. 页面间通信: 虽然示例中没有直接展示两个浏览器页面之间的通信,但通常可以使用`...

    HTML 网页特效拖动文字

    /* 可选背景色 */ padding: 10px; cursor: move; /* 更改鼠标指针为移动手型 */ } ``` 3. **JavaScript**: 实现拖动效果通常需要用到JavaScript,特别是DOM操作和事件监听。以下是一个简单的例子,展示了如何...

    多种js图片轮播效果

    - `o.slide`函数是主要的轮播实现逻辑,它接收两个参数:`id`表示轮播容器的ID,`arg`是一个可选的对象,用于设置额外的配置选项如颜色、时间间隔等。 - 内部通过`change`函数来切换显示的图片索引,通过`c`函数来...

    jQuery水平垂直自由拖拽代码drag.js插件

    `drag.js`插件的参数支持多种配置,例如`handle`用于指定拖动操作的触发元素,`cursor`可以自定义拖动时的鼠标样式,`containment`则可以限制元素的拖动范围。`stop`回调函数会在拖放操作结束时触发,我们可以在这里...

    原生JS放大镜

    /* 圆角效果,可选 */ cursor: none; /* 鼠标指针样式 */ display: none; /* 初始隐藏 */ } ``` 现在进入JavaScript的核心部分。我们需要监听主图片的鼠标移动事件,实时更新放大镜视窗的位置和内容。这里我们将...

    jquery环状图标菜单插件鼠标悬停环状排列图标菜单代码

    通常,菜单由多个图标元素组成,每个元素都是一个`<li>`标签,包含一个图标(如`<i>`或`<img>`)和可选的文本。这些`<li>`标签将被包装在一个`<ul>`列表中,然后通过CSS进行定位和动画设置。例如: ```html <li>...

    DW-CS5-CSS规则英汉对照表.pdf

    2. `Cursor`: 设置鼠标光标样式,如`pointer`(手形)、`text`(文本编辑)。 3. `Filter`: 应用视觉效果,如模糊、灰度等。 以上是对DW-CS5-CSS规则的简要介绍,掌握这些基本概念将有助于理解和创建美观、功能丰富...

    CSS各种属性代码大全

    `用于设置边框样式,可选样式有: - `solid`: 实线 - `dotted`: 点线 - `double`: 双线 - `groove`: 凹槽状边框 - `ridge`: 垄状边框 - `inset`: 内凹边框 - `outset`: 外凸边框 - **边框颜色**: `border-top...

    通过css和html构建能耗数据分析树状图

    3. 可选:结合JavaScript实现展开/折叠功能。 4. 如果需要复杂的数据可视化,可以考虑引入数据可视化库。 通过这样的方式,我们能够创建出一个既美观又实用的能耗数据分析树状图,便于用户理解和分析数据。

    css的很漂亮的form样式

    4. 提交按钮(`button`):同样可以使用`border`、`background`、`padding`等属性来美化,还可以通过`cursor`属性设置鼠标悬停时的光标形状。 三、表单布局 1. `display`属性:`flex`或`grid`布局可以方便地实现...

    网页设计考试题.pdf

    可以设置背景图像、颜色、字体样式等,如`background-position`用于定位背景图像,`cursor:pointer`设置鼠标光标为手型,`text-decoration:none`去掉连接的下划线。 3. 网页布局技术:最新的布局技术是CSS+XHTML,...

    CSS语法速查表(CSS语法一览表)

    - **可选值**: 颜色名称、十六进制值、RGB、RGBA、HSL、HSLA等。 - **示例**: `color: #FF0000;` **3.2 background-color** - **功能**: 设置背景颜色。 - **示例**: `background-color: #FFFFFF;` **3.3 ...

    Html\checkbox)属性解析及应用.docx

    24. MousePointer 属性:该属性用于设置鼠标指针的样式。 25. OLEDropMode 属性:该属性用于获得或设置该对象是否能作为一个 OLE 放下目标,取值为:0 None(无)、1 Manual(手动)。 26. PictureStyle 属性:该...

Global site tag (gtag.js) - Google Analytics