gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated syntax and reworked layout (#21040)

Browse Source
This commit is contained in:
Micky
2018-10-23 05:57:25 +11:00
committed by Paul Gamble
parent 421141d7f4
commit a5e8e3a271
1 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
guide/english/css/css-cursors/index.md
View File

@ -4,54 +4,54 @@ title: CSS Cursors
## CSS Cursors ## CSS Cursors
The cursor property specifies the type of cursor to be displayed when you hover over an element. It has 39 possible values: The cursor property specifies the type of cursor to be displayed when you hover over an element. It has 39 possible values:
```css
.alias { cursor: alias; } • `cursor: alias;`<br>
.all-scroll { cursor: all-scroll; } • `cursor: all-scroll;`<br>
.auto { cursor: auto; } • `cursor: auto;`<br>
.cell { cursor: cell; } • `cursor: cell;`<br>
.context-menu { cursor: context-menu; } • `cursor: context-menu;`<br>
.col-resize { cursor: col-resize; } • `cursor: col-resize;`<br>
.copy { cursor: copy; } • `cursor: copy;`<br>
.crosshair { cursor: crosshair; } • `cursor: crosshair;`<br>
.default { cursor: default; } • `cursor: default;`<br>
.e-resize { cursor: e-resize; } • `cursor: e-resize;`<br>
.ew-resize { cursor: ew-resize; } • `cursor: ew-resize;`<br>
.grab { cursor: grab; } • `cursor: grab;`<br>
.grabbing { cursor: grabbing; } • `cursor: grabbing;`<br>
.help { cursor: help; } • `cursor: help;`<br>
.move { cursor: move; } • `cursor: move;`<br>
.n-resize { cursor: n-resize; } • `cursor: n-resize;`<br>
.ne-resize { cursor: ne-resize; } • `cursor: ne-resize;`<br>
.nesw-resize { cursor: nesw-resize; } • `cursor: nesw-resize;`<br>
.ns-resize { cursor: ns-resize; } • `cursor: ns-resize;`<br>
.nw-resize { cursor: nw-resize; } • `cursor: nw-resize ;`<br>
.nwse-resize { cursor: nwse-resize; } • `cursor: nwse-resize;`<br>
.no-drop { cursor: no-drop; } • `cursor: no-drop;`<br>
.none { cursor: none; } • `cursor: none;`<br>
.not-allowed { cursor: not-allowed; } • `cursor: not-allowed;`<br>
.pointer { cursor: pointer; } • `cursor: pointer;`<br>
.progress { cursor: progress; } • `cursor: progress;`<br>
.row-resize { cursor: row-resize; } • `cursor: row-resize;`<br>
.s-resize { cursor: s-resize; } • `cursor: s-resize;`<br>
.se-resize { cursor: se-resize; } • `cursor: se-resize;`<br>
.sw-resize { cursor: sw-resize; } • `cursor: sw-resize;`<br>
.text { cursor: text; } • `cursor: text;`<br>
.vertical-text { cursor: vertical-text; } • `cursor: vertical-text;`<br>
.w-resize { cursor: w-resize; } • `cursor: w-resize;`<br>
.wait { cursor: wait; } • `cursor: wait;`<br>
.zoom-in { cursor: zoom-in; } • `cursor: zoom-in;`<br>
.zoom-out { cursor: zoom-out; } • `cursor: zoom-out;`<br>
.initial { cursor: initial; } • `cursor: initial;`<br>
.inherit { cursor: inherit; } • `cursor: inherit;`
```
![alt text](http://www.javascripter.net/faq/24_cursor_styles.gif "CSS Cursors") ![alt text](http://www.javascripter.net/faq/24_cursor_styles.gif "CSS Cursors")
You can also set an image as the cursor. You can also set an image as the cursor.<br>
Note: Always specific a default cursor at the end incase the specified cursor is unavailable. Note: Always specific a default cursor at the end incase the specified cursor is unavailable.
``` ```
.custom-cursor { .custom-cursor {
cursor: url(cursor-image.png),auto; cursor: url(cursor-image.png), auto;
} }
``` ```