This JavaScript code snippet helps you to create a cursor. This code is a HTML code that creates a section with various CSS cursors. The section has an h1 heading ‘The Cursors of CSS’ and a div element with class ‘cursors’. The div contains multiple divs with different class names such as ‘auto’, ‘default’, ‘none’, ‘help’, ‘pointer’, ‘progress’, ‘wait’ etc. Each of these class names represents a different type of cursor that can be used in CSS.
When a cursor property is assigned to any HTML element with one of these class names, it will display the corresponding cursor on hover or mouse events. These cursors can be used to enhance user experience and improve the aesthetics of a webpage.
How to Create JavaScript Cursors
Create the HTML structure for the cursors as follows:
<h1>The Cursors of CSS</h1>
<div class="cursors">
<div class="auto">auto</div>
<div class="default">default</div>
<div class="none">none</div>
<div class="context-menu">context-menu</div>
<div class="help">help</div>
<div class="pointer">pointer</div>
<div class="progress">progress</div>
<div class="wait">wait</div>
<div class="cell">cell</div>
<div class="crosshair">crosshair</div>
<div class="text">text</div>
<div class="vertical-text">vertical-text</div>
<div class="alias">alias</div>
<div class="copy">copy</div>
<div class="move">move</div>
<div class="no-drop">no-drop</div>
<div class="not-allowed">not-allowed</div>
<div class="all-scroll">all-scroll</div>
<div class="col-resize">col-resize</div>
<div class="row-resize">row-resize</div>
<div class="n-resize">n-resize</div>
<div class="s-resize">s-resize</div>
<div class="e-resize">e-resize</div>
<div class="w-resize">w-resize</div>
<div class="ns-resize">ns-resize</div>
<div class="ew-resize">ew-resize</div>
<div class="ne-resize">ne-resize</div>
<div class="nw-resize">nw-resize</div>
<div class="se-resize">se-resize</div>
<div class="sw-resize">sw-resize</div>
<div class="nesw-resize">nesw-resize</div>
<div class="nwse-resize">nwse-resize</div>
</div>
Now, style the cursors using the following CSS styles:
.cursors> div{
background-color: silver;
font-weight: 800;
color: white;
}
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.wait { cursor: wait; }
.cell { cursor: cell; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.move { cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.all-scroll { cursor: all-scroll; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.n-resize { cursor: n-resize; }
.e-resize { cursor: e-resize; }
.s-resize { cursor: s-resize; }
.w-resize { cursor: w-resize; }
.ns-resize { cursor: ns-resize; }
.ew-resize { cursor: ew-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
body {
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.cursors {
display: flex;
flex-wrap: wrap;
}
.cursors > div {
flex: 150px;
padding: 10px 2px;
white-space: nowrap;
border: 1px solid #eee;
border-radius: 5px;
margin: 0 5px 5px 0;
}
.cursors > div:hover {
background: #eee;
}
Load the following scripts before closing the body tag:
<script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script>
That’s all! hopefully, you have successfully created the JavaScript cursors. If you have any questions or suggestions, feel free to comment below.
