The cursor
CSS property changes the mouse cursor when the mouse pointer is over an element. This is a short interactive playground on modifying cursor pointers.
Hover over the rectangle and use the widgets below to play around with different cursors.
General Cursors
Cursor
.cursor-area {
cursor: auto;
}
Links & Status
Cursor
.cursor-area {
cursor: context-menu;
}
Selection
Cursor
.cursor-area {
cursor: cell;
}
Drag and Drop
Cursor
.cursor-area {
cursor: alias;
}
Resizing & Scrolling
Cursor
.cursor-area {
cursor: all-scroll;
}
Zooming
Cursor
.cursor-area {
cursor: zoom-in;
}
With Urls
Cursor images can be used with the url()
function.
Cursor
.cursor-area {
cursor: url(https://res.cloudinary.com/css-playground/image/upload/v1535220420/doge_1.jpg), auto;
}
Conclusion
There are a lot of cursors you could use. This could be much more useful if you’re building an interactive website that could use that extra cursor context. Even for me, looking up all of these cursor types was useful. If you’re curious, I grabbed a large list of the possible cursors from the MDN article on Cursors.
HTML
CSS
Output