网页设计时的指示和选择光标

光标

用户界面的另一个重要部分是光标（在CSS规范中称之为“指示设备”），它由鼠标、写字板、图形书写板甚至光学读取系统之类的设备控制。在大多数web浏览器中，光标对于提供交互反馈很有用，例如，光标经过一个超链接时会变成一只食指伸出的小手，这就是一个明显的例子。

改变光标

CSS2允许改变光标图标，这说明在设计网页时创建一个类似于操作系统中桌面应用的Web应用会容易得多。例如，经过一个指向帮助文件的链接时，光标可能会变成一个“帮助”图标。

这是利用cursor属性完成的。

cursor

值：[[,]*[ auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se- resize | sw-resize | s-resize | w-resize | text | wait | help | progress ]] | inherit

初始值：auto

应用于：所有元素

继承性：有

计算值：对于值，为绝对值，否则，根据指定确定

在网站建设时，默认值auto只表示用户代理应当确定最适合当前上下文的光标图标。这与default不同，后者要求图标是操作系统的默认光标。默认光标通常是一个箭头，不过也不一定，这取决于当前的计算环境。

指示和选择光标

值pointer会把光标图标改为与移过超链接时的光标相同。甚至可以为HTML文档描述这种行为：

a[href]{cursor: pointer;}

利用cursor，可以将任何元素定义为像链接一样改变光标图标。这可能会让用户糊涂，所以建议不要经常这样做。另一方面（可以这么说），利用cursor可以更容易地利用非链接元素创建交互式、脚本驱动的屏幕部件，然后适当地改变图标。

注意：Windows平台的Internet Explorer在IE6以前不能识别pointer，而是使用值hand将光标改变为“指示手”图标。这两个值IE6都能识别。对此常见的建议是按先后顺序使用这两个值，如下：#example {cursor: pointer; cursor: hand;}这并不会验证是否确实这样做，不过这样可以在较新的浏览器和Explorer的较早版本中得到一致的结果•注意，这里的顺序很重要：如果把这两个值的顺序倒过来，就不要指望它还能正常工作。

在网页设计时，Web浏览领域中另一个很常见的光标图标是tes^图标，只要用户能选择文本，就会出现这个图标。这往往是一个“I”光标，作为一个视觉提示，指示用户可以拖动-选择光标下的内容。图13-4显示了一段已经选中的文本的最后有一个文本图标。

指示交互性的另一种办法是使用值crosshair，显然，crosshair会把光标图标变为一个十字符号。这往往是一对彼此呈直角交叉放置的短线，其中一条垂直，另一条水平，看上去就像一个加号（+）。不过，十字符号也可以类似于乘号（或小写的“x”），甚至是手枪瞄准镜内显示的准星图标。十字符号通常用于屏幕捕捉程序，如果用户想准确地知道正在点击哪一个像素，这就很有用。

网站栏目：网页设计时的指示和选择光标
地址分享：/news29/172929.html

成都网站建设公司_创新互联，为您提供App设计、网站导航、网站排名、星空体育app最新版本(2024已更新)、网站设计、网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联