If you hover over a specific element on a webpage, you can see a different mouse cursor with default mouse cursor. For example, if something is running, a mouse cursor on the hourglass can appear, and if you drag it after clicking, it changes the icon in the form of a drag.

This mouse cursor also serves as a good interface to tell you what's going on. What if I want to change the mouse cursor using CSS? In this case, use the cursor property.

The cursor properties of css help you select different mouse cursors. As this can be used to provide a good ui / Lux experience for users, proper mouse cursor changes will be necessary depending on the situation. So, here's how you change it.
# Example of changing mouse cursorBelow is how to use the cursor properties using css.

.test { cursor: default; }

The above code uses the cursor property of css to change the appearance of the mouse cursor. So the cursor properties can be changed to different mouse cursor shapes. The following properties are available:

! Selectable property value
default // arrow to default
cursor // hand shape indicating clickable case
crossshair // crosshairs
progress // indicates processing
wait // wait with the hourglass
help // show question mark
move // show moveable target
url // when importing images using url (custom cursor)



! If you need to change the mouse cursor
So, what happens when you change the mouse cursor? First of all, it's most commonly used in the context below.

  • i. Linkable elements
  • ii. To move by dragging
  • iii. When loading a file or data
  • iv. For elements that have textuals, such as tooltips,
  • v. If you do not want to change the mouse cursor

In most of the above situations, the mouse cursor changes to a suitable shape. For a better user experience, it would be better if you could also change the part about the mouse cursor.



# See how the mouse cursor changes
Below you can see the mouse cursor changes directly. Hover over the circle below to reveal the corresponding cursor.

<div class="test-cursor" style="cursor: default;">cursor: default</div>
<div class="test-cursor" style="cursor: copy;">cursor: copy</div>
<div class="test-cursor" style="cursor: pointer;">cursor: pointer</div>
<div class="test-cursor" style="cursor: crosshair;">cursor: crosshair</div>
<div class="test-cursor" style="cursor: progress;">cursor: progress</div>
<div class="test-cursor" style="cursor: help;">cursor: help</div>
<div class="test-cursor" style="cursor: move;">cursor: move</div>
<style>
.test-cursor {
vertical-align: middle;
background: #e9e9e9;
display: inline-block;
width: 124px;
padding-top: 46px;
height: 124px;
text-align: center;
border-radius: 50%;
border: 1px solid #d2d2d2;
margin: 10px;
}
</style>