Enhance user experience and select the right mouse cursor.

User experience can be said to be the top priority of the front-end, product comfort is an important measure of user experience, it can be said that the quality of user experience directly affects the site or application development prospects, (state-owned app added).

This article refers to the use of mouse cursor status indication in user experience.

Actual experience case please move.Here

PCWe usually use different mouse cursors to represent the corresponding operation instructions in different scenarios.

For example, where we can click, we make the mouse into a small hand, where we can drag, we change the mouse into an icon with four arrows, forbidden buttons, the mouse should be a forbidden sign, and so on a series of states.

If the default is not suitable for us, we can also specify icon as the icon of the mouse. In short, using the appropriate mouse state in the corresponding place can enhance the sense of interaction and bring a better experience.

The browser attributes that are browsers supported by most browsers are listed below.

.default{
    cursor: default;
}
.inherit{
    cursor: inherit;
}
.auto{
    cursor: auto;
}
.none{
    cursor: none;
}
.pointer{
    cursor: pointer;
}
.help{
    cursor: help;
}
.move{
    cursor: move;
}
.wait{
    cursor: wait;
}
.copy{
    cursor: copy;
}
.cell{
    cursor: cell;
}
.all-scroll{
    cursor: all-scroll;
}
.context-menu{
    cursor: context-menu;
}
.text{
    cursor: text;
}
.vertical-text{
    cursor: vertical-text;
}
.crosshair{
    cursor: crosshair;
}
.progress{
    cursor: progress;
}
.not-allowed{
    cursor: not-allowed;
}
.no-drop{
    cursor: no-drop;
}
.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;
}
.ne-resize{
    cursor: ne-resize;
}
.ns-resize{
    cursor: ns-resize;
}
.nw-resize{
    cursor: nw-resize;
}
.nwse-resize{
    cursor: nwse-resize;
}
.nesw-resize{
    cursor: nesw-resize;
}
.ew-resize{
    cursor: ew-resize;
}
.se-resize{
    cursor: se-resize;
}
.sw-resize{
    cursor: sw-resize;
}

（Finished)

Leave a Reply Cancel reply