css中cursor属性详解

html-css029

css中cursor属性详解,第1张

cursor 属性规定要显示的光标的类型(形状)。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

描述

url  

需使用的自定义光标的 URL。

注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

default    默认光标(通常是一个箭头)  

auto    默认。浏览器设置的光标。  

crosshair    光标呈现为十字线。  

pointer  光标呈现为指示链接的指针(一只手)

move    此光标指示某对象可被移动。  

e-resize    此光标指示矩形框的边缘可被向右(东)移动。  

ne-resize    此光标指示矩形框的边缘可被向上及向右移动(北/东)。  

nw-resize    此光标指示矩形框的边缘可被向上及向左移动(北/西)。  

n-resize    此光标指示矩形框的边缘可被向上(北)移动。  

se-resize    此光标指示矩形框的边缘可被向下及向右移动(南/东)。  

sw-resize    此光标指示矩形框的边缘可被向下及向左移动(南/西)。  

s-resize    此光标指示矩形框的边缘可被向下移动(南)。  

w-resize    此光标指示矩形框的边缘可被向左移动(西)。  

text    此光标指示文本。  

wait    此光标指示程序正忙(通常是一只表或沙漏)。  

help    此光标指示可用的帮助(通常是一个问号或一个气球)。  

cursor的意思:光标。

读音:英[ˈkɜːsər]、美[ˈkɜːrsər]。

释义:n. 光标;(计算尺的)[计] 游标,指针。

变形:复数cursors。

cursor造句如下:

1、You can move the cursor by using the mouse.

你可以使用鼠标来移动光标。

2、He moves the cursor, clicks the mouse.

他移动光标,点击鼠标。

3、A cursor around the target tells us he did it correctly.

目标点周围的光标告诉我们他做对了。

4、Locks any row accessed by a transaction of an application while the cursor is positioned on the row.

在游标定位在行中时,锁定这个被应用程序的某个事务访问的任何一行。

5、If you hover over the icon or space to the right of the label, you will not see the disabled cursor style.

如果将鼠标悬浮于图标或该标签右侧的空白处,将看不到这个禁用了的光标样式。

Cursor 属性,全称是“Control.Cursor 属性”,意即

获取或设置当鼠标指针位于控件上时显示的光标。

有兴趣的网友请继续看:

鼠标属性

我们知道,当把鼠标移动到不同的地方时,当鼠标需要执行不同的功能时,当系统处于不同的状态时,都会使鼠标的形状发生改变。

用CSS来改变鼠标的属性,就是当鼠标移动到不同的元素对象上面时,让鼠标以不同的形状、图案显示。

在CSS当中,这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值,我们来看一下它的详细列表:

我们来看一个例子吧,请看下面这段代码:

<html>

<head>

<title>changemouse</title>

</head>

<body>

<h1 style=“font-family:文鼎新艺体简”>鼠标效果</h1>//*设置字体*//

<p style=“font-family:行书体;font-size:16pt;color:red”>

请把鼠标移到相应的位置观看效果。</p>//*设置字体的名称、大小、颜色*//

<div style=“font-family:行书体;font-size:24pt;color:green;”>

//*设置该区域内的字体名称、大小、绿色*//

<p><span style=“cursor:hand”>手的形状</span><br>

//*设置鼠标属性为手的形状*//

<span style=“cursor:move”>移动</span><br>//*设置鼠标属性为移动*//

<span style=“cursor:ne-resize”>反方向</span><br>

//*设置鼠标属性为反方向*//

<span style=“cursor:wait”>等待</span><br>//*设置鼠标属性为等待*//

<span style=“cursor:help”>求助</span>//*设置鼠标属性为求助*//

</p>

</div>

</body>

</html>

上述代码产生的效果请您点击:http://www.hongen.com/pc/homepage/css/sl/changemouse.htm