美文网首页
css之cursor 的所有自带光标样式

css之cursor 的所有自带光标样式

作者: 7b7d23d16ab5 | 来源:发表于2020-07-27 17:32 被阅读0次

测试地址:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

将以下代码复制到上面链接中的左侧区域,点击RUN按钮,查看效果吧

<!DOCTYPE html>
<html>
<head>
<style>
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
</style>
</head>
<body>

<h1>The cursor Property</h1>
<p>Mouse over the words to change the mouse cursor.</p>

<p class="alias">alias</p>
<p class="all-scroll">all-scroll</p>
<p class="auto">auto</p>
<p class="cell">cell</p>
<p class="context-menu">context-menu</p>
<p class="col-resize">col-resize</p>
<p class="copy">copy</p>
<p class="crosshair">crosshair</p>
<p class="default">default</p>
<p class="e-resize">e-resize</p>
<p class="ew-resize">ew-resize</p>
<p class="grab">grab</p>
<p class="grabbing">grabbing</p>
<p class="help">help</p>
<p class="move">move</p>
<p class="n-resize">n-resize</p>
<p class="ne-resize">ne-resize</p>
<p class="nesw-resize">nesw-resize</p>
<p class="ns-resize">ns-resize</p>
<p class="nw-resize">nw-resize</p>
<p class="nwse-resize">nwse-resize</p>
<p class="no-drop">no-drop</p>
<p class="none">none</p>
<p class="not-allowed">not-allowed</p>
<p class="pointer">pointer</p>
<p class="progress">progress</p>
<p class="row-resize">row-resize</p>
<p class="s-resize">s-resize</p>
<p class="se-resize">se-resize</p>
<p class="sw-resize">sw-resize</p>
<p class="text">text</p>
<p class="url">url</p>
<p class="w-resize">w-resize</p>
<p class="wait">wait</p>
<p class="zoom-in">zoom-in</p>
<p class="zoom-out">zoom-out</p>

</body>
</html>

相关文章

  • css之cursor 的所有自带光标样式

    测试地址:https://www.w3schools.com/cssref/tryit.asp?filename=...

  • CSS之基础知识开篇(五)

    1.鼠标样式 Cursor: pointer 鼠标变成小手Cursor: default; 默认光标:小白...

  • CSS-用户界面样式

    1、鼠标样式:cursor 作用:定义光标形状 cursor:常用取值:default(小白)、pointer(小...

  • 《Custom Cursor for Chrome™》为Chro

    浏览器的鼠标光标样式, 可以通过css中的cursor属性进行定义, 也可以通过Chrome扩展程序《Custom...

  • CSS cursor属性 演示

    作用 cursor属性定义当光标放在一个元素的边界内时,光标的样式。有时我们需要动态的变化光标样式时就需要这个属性...

  • Css3

    光标样式 style="cursor:xxxxx> 新增属性选择器 【att^=“value”】、【att$=“v...

  • CSS中cursor 鼠标指针光标样式(形状)

    在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状。在这里整理一下cursor...

  • css cursor样式

    cursor:no-drop //红色的圈加斜杠,禁止 cursor:not-allowed //...

  • Cursor:url()的使用

    Cursor:url()的使用 今天在项目中,要用到自定义鼠标样式,格式: css:{cursor:url('绝对...

  • cursor :

    cursor:crosshair;十字光标 cursor:pointer/hand;手型 cursor:wait;...

网友评论

      本文标题:css之cursor 的所有自带光标样式

      本文链接:https://www.haomeiwen.com/subject/xqftrktx.html