Cursors

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <div style="border: 1px solid black; padding: 2px; cursor: wait">Hover on me for a 'wait' cursor!</div>

## WikiText, CSS, and HTML Cursors (Attribute)

### What is Cursor?

**Cursor** is an HTML, CSS, and WikiText attribute, although in WikiText the options are more limited. Cursor changes the type of cursor that appears when the element is hovered on. Below you will find a list of cursors compatible with HTML and CSS, the majority of which are **also** compatible with WikiCode/WikiText.

### How to Use Cursor

To change the cursor type, type in the following:
```
cursor:*type of Cursor*;

```
and replace \*cursor type\* with one of the options from the list below (Please note that some cursors will not work on certain unsupported browsers)
### Cursor types

Hover on the below cursors to see results:

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

### Examples

Hover on me for a 'wait' cursor!
The code for this:

```
<div style="border: 1px solid black; padding: 2px; cursor: wait">Hover on me for a 'wait' cursor!</div>
```

Hover on me for a 'zoom-in' cursor!
The code for this:

```
<div style="border: 1px solid black; padding: 2px; cursor: zoom-in">Hover on me for a 'zoom-in' cursor!</div>
```

Hover on me for a 'zoom-out' cursor!
The code for this:

```
<div style="border: 1px solid black; padding: 2px; cursor: zoom-out">Hover on me for a 'zoom-out' cursor!</div>
```

Hover on me for a 'help' cursor!
The code for this:

```
<div style="border: 1px solid black; padding: 2px; cursor: help">Hover on me for a 'help' cursor!</div>
```

Hover on me for a 'crosshair' cursor!
The code for this:

```
<div style="border: 1px solid black; padding: 2px; cursor: crosshair">Hover on me for a 'crosshair' cursor!</div>
```

Hover on me for a 'not-allowed' cursor!
The code for this:

```
<div style="border: 1px solid black; padding: 2px; cursor: not-allowed">Hover on me for a 'not-allowed' cursor!</div>
```

Hover on me to make your cursor disappear!
The code for this:

```
<div style="border: 1px solid black; padding: 2px; cursor: none">Hover on me to make your cursor disappear!</div>
```

Hover on me for a 'cell' cursor!
The code for this:

```
<div style="border: 1px solid black; padding: 2px; cursor: cell">Hover on me for a 'cell' cursor!</div>
```

Hover on me for a 'context-menu' cursor!
The code for this:

```
<div style="border: 1px solid black; padding: 2px; cursor: context-menu">Hover on me for a 'context-menu' cursor!</div>
```

Hover on me for a 'col-resize' cursor!
The code for this:

```
<div style="border: 1px solid black; padding: 2px; cursor: col-resize">Hover on me for a 'col-resize' cursor!</div>
```

## Wiki CSS Cursors

You may have seen certain wikis have cursors that look, well, not normal--perhaps it's a dragon hand cursor, or a sword...whatever it is, this guide will show you how to do this!

**Note: This is currently not allowed to be implemented wiki-wide, you can put it in your common.css: [[1]]**

### Step One

Put in the following code at the MediaWiki:Wikia.css page.
```
body,
.Message\_\_content,
.wds-dropdown,
.wds-tabs\_\_tab,
.wds-dropdown\_\_toggle,
.client-js{
 cursor: url('LINK'), auto !important;
}

a,
area,
button,
[role="button"],
.ActionItem,
.Message\_\_title,
.oo-ui-labelElement-label,
.sitedir-ltr input,
.rich-text-editor\_\_toolbar\_\_icon-wrapper,
.rich-text-editor\_\_toolbar\_\_icon-controls {
 cursor: url('LINK'), pointer !important;
}

```

### Step Two

Next, Upload an image into the wiki (See Image Modification). Once you've uploaded the image, visit it's page (EX, if the image was called DUCK, then the page would be: File:DUCK.png). Finally, click directly on the image. It should take you to a new page. **COPY THE LINK OF THIS PAGE!** Then, replace the LINK with the copied link. Do this with 2 different images. The first part of the code is for a non-clickable cursor. The second image is for a clickable cursor.
*It would also work if you have an image from another wiki, and you can copy the link of that file.*

### Step Three

Hit 'Save' in the wiki CSS. Reload the page, or purge your browser's cache to see the changes, and you're good to go!