Cursors greatly influence an end user’s experience and CSS can be used to easily affect cursor changes depending upon hover, location and actions. This helpful tutorial will explain how to make it happen!
It is something that we all experience every time we are online or just working on our computers. We move our mouse and the cursor changes depending upon where we hover and click on our screen. This can be controlled through CSS and to get started, all you need is a basic understanding of the cursor: property.
This CSS tutorial begins with showing how to change the default arrow cursor to the familiar cursor: pointer;, which you often see when hovering over a link or button. Also featured is the more advanced cursor: move; cursor, used when an object can literally be dragged and roped elsewhere on the page.
Another common cursor is the text selector, and in this lesson you also see who you can choose something other than the default, for instance the aforementioned pointer cursor. This is ok to do because it does not interfere at all with the functionality or user experience. But if you choose a less common, or unexpected cursor like a crosshair for something simple like hovering over a link for instance, it can cause confusion.
a {
cursor: crosshair;
}
It still functions just fine, but the user may be a bit confused because the crosshair cursor implies a different function than a pointer does. So it is important to remember that a lot of information is gleaned from something as small as a cursor by your end users.
If you found this CSS video tutorial to be useful, you will also enjoy this recent post on how to make your links shake when you hover over them. Let us know if you have a request for a future post by sending us a message. Make sure to visit us on Facebook to stay up-to-date and join our ongoing conversation about all things CSS, including content and resources not seen here on the website. Thanks for stopping by!