403 896 5906

Blog Post: CSS Cursor Property

Red Deer & Blackfalds Web Design Writes:

Utilizing different Cursor Hover Properties is a small but effective way to maximize your Small Business Website Design. For different areas on your Web Development it is an interesting way to maximize the UX (user experience) for your existing and potential visitors. This can be applied to any element on a website, but for the example below it is specific to images. By altering the CSS slightly you can have this work on text blocks, DIV sections …etc., so long as you can apply the given Class Name to it.

Keep in mind, this article will only work on desktop! As hover techniques will not work on a phone/tablet.

Below are a few different/common cursor hover techniques (as seen by hovering the image) that will help you on your way to the best possible client response:

Crosshair

img.crosshair:hover {cursor: crosshair;}


Help

img.help:hover {cursor: help;}


Wait

img.wait:hover {cursor: wait;}


Pointer

img.pointer:hover {cursor: pointer;}


Text

img.text:hover {cursor: text;}


Joshua Neufeld

Joshua Neufeld

Web Development & Design are passions of mine, and so is Small Business! I am determined to give my clients the best possible online presence in an affordable and professional manner. Contact Me Today!
Joshua Neufeld

Latest posts by Joshua Neufeld (see all)