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
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; }
.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: grab; }
.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; }
.vertical-text { cursor: vertical-text; }
.w-resize { cursor: w-resize; }
.wait { cursor: wait; }
.zoom-in { cursor: zoom-in; }
.zoom-out { cursor: zoom-out; }
.initial { cursor: initial; }
.inherit { cursor: inherit; }
```
• `cursor: alias;`<br>
• `cursor: all-scroll;`<br>
• `cursor: auto;`<br>
• `cursor: cell;`<br>
• `cursor: context-menu;`<br>
• `cursor: col-resize;`<br>
• `cursor: copy;`<br>
• `cursor: crosshair;`<br>
• `cursor: default;`<br>
• `cursor: e-resize;`<br>
• `cursor: ew-resize;`<br>
• `cursor: grab;`<br>
• `cursor: grabbing;`<br>
• `cursor: help;`<br>
• `cursor: move;`<br>
• `cursor: n-resize;`<br>
• `cursor: ne-resize;`<br>
• `cursor: nesw-resize;`<br>
• `cursor: ns-resize;`<br>
• `cursor: nw-resize ;`<br>
• `cursor: nwse-resize;`<br>
• `cursor: no-drop;`<br>
• `cursor: none;`<br>
• `cursor: not-allowed;`<br>
• `cursor: pointer;`<br>
• `cursor: progress;`<br>
• `cursor: row-resize;`<br>
• `cursor: s-resize;`<br>
• `cursor: se-resize;`<br>
• `cursor: sw-resize;`<br>
• `cursor: text;`<br>
• `cursor: vertical-text;`<br>
• `cursor: w-resize;`<br>
• `cursor: wait;`<br>
• `cursor: zoom-in;`<br>
• `cursor: zoom-out;`<br>
• `cursor: initial;`<br>
• `cursor: inherit;`
![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.
```
.custom-cursor {
cursor: url(cursor-image.png),auto;
cursor: url(cursor-image.png), auto;
}
```