Changing the hover cursor icon for links and menu items in your Joomla site
By default all links have a “hand icon” when you hover over a link. However, there are some scenarios where you may want to change this mouse pointer from one that looks like a hand to another one from the available options (check out the list here).
The default “hand” cursor for links
In this case we will use the cursor property – which specifies the type of cursor to be displayed when pointing at an element. The cursor property is supported in all major browsers. By changing the value of the cursor declaration you can assign cursor styles to various HTML elements. Although in theory this is great functionality, it’s very easy to confuse website users by defining inappropriate cursor styles. In this small guide we will show you only two examples of use which in our opinion could be very useful in guiding your users.
Help Cursor Icon
By default the cursor indicates that help is available. So you can use this style of icon if you have an FAQ or HELP item in your menu. The result of doing this might be similar to the following:
Help cursor for Menu Item
How do you get this effect? It’s surprisingly easy. In the Joomla! Menu Manager just check the ID of the selected Menu item, then use our override.css or Custom CSS field (more details may be found in this guide) to add this short line of code:
a#menu776 { cursor: help; }
Change the example number “776” to the menu item ID number that you found in the Menu Manager via the previous step, and a Question Mark should appear when you hover over the link.
Default Arrow Cursor for Links
In some cases you might need to use the default cursor also for Menu Item Link(s). The method for using this is also simple; you must assign the class and in it set the cursor’s type to default.
a#menu911 { cursor: default; }
Change example number “911” to your chosen menu ID from the Menu Manager and a default “Arrow” cursor should appear when you hover over that link. The result of this example is shown below.
Default “Arrow” Cursor for Menu Item
Even when you use the default “arrow” cursor icon the link(s) will still work – but for most users they are not really links anymore.
p.s.
If you want to change the cursor for the entire web page, and not just for menu links, use the general selector:
a { cursor: default; }
You can also assign different cursor types for specific areas on a Web page using its class:
.cross { cursor: crosshair; }
.help { cursor: help; }
Custom Mouse Cursors – Add Your Own Image
You can also have the cursor be an image, which can be used for links and for specific areas using classes. You just need to use your own image – a small icon only, so image size should be 33×36 pixels; it could also be an animated gif.
.imgcursor { cursor: url(images/my-cursor.png), auto; }or
a, a:hover { cursor: url(images/funny-cursor.gif), auto; }
This article was first published
