温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3中cursor属性怎么改变光标的形状

发布时间:2022-03-01 13:55:35 来源:亿速云 阅读:149 作者:小新 栏目:web开发

这篇文章主要为大家展示了“css3中cursor属性怎么改变光标的形状”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css3中cursor属性怎么改变光标的形状”这篇文章吧。

  首先我们来看看cursor属性是如何改变光标形状的。

  css3cursor属性的基本语法:

  cursor:[[<uri>[<x><y>]?,]*[auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing]];

  注:

  1、cursor属性适用于所有元素;

  2、cursor属性仅对具有指针设备(如鼠标)的设备有效;它对触控设备没有任何影响。

  3、并非所有浏览器都支持cursor属性的所有属性值,且所有属性值在所有浏览器和操作系统中显示的效果不一定相同。

  下面我们来看看cursor属性的这些属性值可以设置怎样的光标形状。

  图像游标(自定义游标)

  <URI>:

  一个或多个逗号分隔的url()用来指向要用作光标的图像。用户代理从第一个中检索游标url()。如果用户代理无法处理游标列表的第一个游标,则必须尝试处理游标列表等。如果用户代理无法处理任何提供的图像(请参阅浏览器支持),则必须使用游标关键字。列表的末尾。可选的<x>和<y>坐标标识图像中指针位置(即热点)的确切位置。

  必须在回退列表的末尾提供非URL标准游标关键字。

  <x><y>:

  使用小于32的无单位数字,不允许使用负值。这些值指定光标热点的坐标。第一个数字是x坐标,第二个数字是y坐标。

  例:

  cursor:url(some-cursor.png)215,pointer;

  下面我们来看看图像游标的示例:

  css代码:

  .custom{

  cursor:url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.png),url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.cur),pointer;

  }

  通用光标(箭头状)

  default:默认光标,通常箭头。

  auto:根据当前上下文确定要显示的光标。例如,text当文本悬停时显示。

  none:不为元素呈现光标显示光标。

  例:

  .auto{

  cursor:auto;

  }

  .default{

  cursor:default;

  }

  .none{

  cursor:none;

  }

  1.gif

  链接和状态游标

  context-menu:光标下的对象可以使用上下文菜单。通常呈现为箭头,旁边有一个类似菜单的小图形。

  只有IE10及更高版本在Windows上实现了这一功能。

  help:此光标通常呈现为问号或气球。它表示光标下的对象可以使用帮助。

  pointer:光标是指示链接的指针。

  progress:进度指标。表示程序正在执行某些处理,但不同之处wait在于用户仍可以与程序进行交互。通常呈现为旋转的沙滩球,或带有手表或沙漏的箭头。

  wait:此光标通常呈现为手表或沙漏。它表示程序正忙,用户应该等待。

  例:

  .context-menu{

  cursor:context-menu;

  }

  .help{

  cursor:help;

  }

  .pointer{

  cursor:pointer;

  }

  .progress{

  cursor:progress;

  }

  .wait{

  cursor:wait;

  }

  2.gif

  选择光标

  cell:此光标通常呈现为粗加号,中间有一个点。它表示可以选择一个单元或一组单元。

  crosshair:简单的十字准线(例如,类似于“+”符号的短线段)。通常用于表示二维位图选择模式。

  text:

  该光标通常呈现为垂直工字梁。用户代理可以自动显示vertical-text垂直文本的水平工字梁/光标(例如与关键字相同),或者就此而言,任何角度的工字梁/光标用于以任何特定角度渲染的文本。它表示可以选择的文本。

  vertical-text:该光标通常呈现为水平工字梁。它表示可以选择的垂直文本。

  例:

  .cell{

  cursor:cell;

  }

  .crosshair{

  cursor:crosshair;

  }

  .text{

  cursor:text;

  }

  .vertical-text{

  cursor:vertical-text;

  }

  3.gif

  拖放光标

  alias:此光标通常呈现为箭头,旁边有一个小弯曲箭头。它表示要创建的某个别名/快捷方式。

  copy:此光标通常呈现为箭头,旁边有一个小加号。它表明要复制的东西。

  move:表示要移动的东西。渲染此光标的方式取决于浏览器,如上面的描述中所述。它通常呈现为四向箭头或类似手的形状。

  no-drop:此光标通常呈现为手形或指针,带有一个小圆圈,并带有一条直线。它表示无法在当前光标位置删除拖动的项目。

  not-allowed:此光标通常呈现为一个圆圈,并带有一条直线。它表示不会执行请求的操作。

  例:

  .alias{

  cursor:alias;

  }

  .copy{

  cursor:copy;

  }

  .move{

  cursor:move;

  }

  .no-drop{

  cursor:no-drop;

  }

  .not-allowed{

  cursor:not-allowed;

  }

  4.gif

  缩放光标:

  zoom-in(放大)、zoom-out(缩小):

  表示某些内容可以放大或缩小,并且通常在玻璃中心呈现为带有“+”或“-”的放大镜。

  例:

  .zoom-in{

  cursor:-webkit-zoom-in;

  cursor:zoom-in;

  }

  .zoom-out{

  cursor:-webkit-zoom-out;

  cursor:zoom-out;

  }

  5.gif

  抓取光标

  grab、grabbing:

  表示可以抓取元素(拖动以移动)。grab是一只开放的手“准备拖动”,并且dragging是一只看起来像抓住东西的“闭合”手。

  例:

  .grab{

  cursor:-webkit-grab;

  cursor:grab;

  }

  .grabbing{

  cursor:-webkit-grabbing;

  cursor:grabbing;

  }

  7.gif

  缩放和滚动游标

  e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize

  表示要移动某些边缘。例如,se-resize当运动从开始使用光标东南部盒子的角落。

  ew-resize,ns-resize,nesw-resize,nwse-resize

  表示双向调整大小游标。这些光标类型通常在不同方向上呈现为双向箭头。

  col-resize:

  此光标通常呈现为左右箭头,并用垂直条分隔它们。它表示可以水平调整项目/列的大小。它类似于您在MSExcel等程序中看到的光标。

  row-resize:

  此光标通常呈现为向上和向下的箭头,水平条将它们分开。它表示可以垂直调整项目/行的大小。它类似于您在MSExcel等程序中看到的光标。

  all-scroll:

  此光标通常呈现为向上,向下,向左和向右的箭头,中间有一个点。它表示可以向任何方向滚动某些内容。

  例:

  .n-resize{

  cursor:n-resize;

  }

  .ne-resize{

  cursor:ne-resize;

  }

  .e-resize{

  cursor:e-resize;

  }

  .se-resize{

  cursor:se-resize;

  }

  .s-resize{

  cursor:s-resize;

  }

  .sw-resize{

  cursor:sw-resize;

  }

  .w-resize{

  cursor:w-resize;

  }

  .nw-resize{

  cursor:nw-resize;

  }

  .se-resize{

  cursor:se-resize;

  }

  .ew-resize{

  cursor:ew-resize;

  }

  .ns-resize{

  cursor:ns-resize;

  }

  .nesw-resize{

  cursor:nesw-resize;

  }

  .nwse-resize{

  cursor:nwse-resize;

  }

  .col-resize{

  cursor:col-resize;

  }

  .row-resize{

  cursor:row-resize;

  }

  .all-scroll{

  cursor:all-scroll;

  }

以上是“css3中cursor属性怎么改变光标的形状”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI