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

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)