1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

光标样式

cursor 可以设置当鼠标光标悬念在元素上时的样式,接收以下的值:

  • 光标关键字
  • 图片地址:指向自定义光标图片的地址,并且地址后面可选择地跟一对空格分隔的数字 x、y 表示偏移。必须跟一个关键字鼠标样式作为备选方案。
/* 关键字值 */
cursor: pointer;
cursor: auto;

/* 使用URL,并提供一个关键字值作为备用 */
cursor: url(https://3yya.com/logo-mini.png), pointer;

/* URL和xy的坐标偏移值,最后提供一个关键字值作为备用 */
cursor:  url(cursor1.png) 4 12, auto;
cursor:  url(cursor2.png) 2 2, pointer;

下列中按钮的光标设置成了 not-allowed

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/vYWQGbO?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

光标样式关键字

$$tip

可以将鼠标光标移动到属性值上查看效果。

$$

属性值 描述
<p style="cursor: auto">auto</p> 根据当前内容自动决定样式。
<p style="cursor: default">default</p> 默认光标,通常是箭头。
<p style="cursor: none">none</p> 没有光标。
<p style="cursor: context-menu">context-menu</p> 指针下有可用内容目录。
<p style="cursor: help">help</p> 帮助光标。
<p style="cursor: pointer">pointer</p> 小手光标,通常用于链接或按钮等可以点击的元素。
<p style="cursor: progress">progress</p> 处理中的光标。
<p style="cursor: wait">wait</p> 等待中的光标。
<p style="cursor: cell">cell</p> 选中单元格的光标。
<p style="cursor: crosshair">crosshair</p> 十字指标。
<p style="cursor: text">text</p> 文本选择光标。
<p style="cursor: vertical-text">vertical-text</p> 垂直文本选择光标。
<p style="cursor:alias">alias</p> 快捷方式光标。
<p style="cursor: copy">copy</p> 复制光标。
<p style="cursor: zoom-in">zoom-in</p> 放大光标。
<p style="cursor: zoom-out">zoom-out</p> 缩小光标。
<p style="cursor: move">move</p> 移动光标。Windows 和 MacOS 下 “move” 和 “all-scroll” 相同。
<p style="cursor: no-drop">no-drop</p> 禁止放置光标。 Windows 和 MacOS 下 “no-drop” 和 “no-allowed” 相同。
<p style="cursor: not-allowed">not-allowed</p> 不能执行光标。
<p style="cursor: grab">grab</p> 抓取光标。
<p style="cursor: grabbing">grabbing</p> 抓取中光标。
<p style="cursor: all-scroll">all-scroll</p> 允许滚动光标。
<p style="cursor: col-resize">col-resize</p> 设置宽度光标。
<p style="cursor: row-resize">row-resize</p> 设置高度光标。
<p style="cursor: n-resize">n-resize</p> n-resize
<p style="cursor: e-resize">e-resize</p> e-resize
<p style="cursor: s-resize">s-resize</p> s-resize
<p style="cursor: w-resize">w-resize</p> w-resize
<p style="cursor: ne-resize">ne-resize</p> ne-resize
<p style="cursor: nw-resize">nw-resize</p> nw-resize
<p style="cursor: se-resize">se-resize</p> se-resize
<p style="cursor: sw-resize">sw-resize</p> sw-resize
<p style="cursor: ew-resize">ew-resize</p> ew-resize
<p style="cursor: ns-resize">ns-resize</p> ns-resize
<p style="cursor: nesw-resize">nesw-resize</p> nesw-resize
<p style="cursor: nwse-resize">nwse-resize</p> nwse-resize

练习

  1. 用图片自定义你的光标样式。