Html cursor | Get to Know About the 5 HTML Cursor Properties
Hey friends, today I’ll explain the 5 most common and useful HTML Cursor properties. Before we dive in, I’ll introduce myself. I’m CodingPorium and I make coding tutorials and provide Free Source Code. Do check out my YouTube channel here or by searching for CodingPorium on YouTube for more!
Before we enter this tutorial, I understand some might feel confused about what is a cursor even though it is actually something that you see every time on your laptop/PC. The cursor is the arrow/icon that is always appearing when you hover over your mouse or trackpad. Here’s an image to show a better visualization.
In HTML, we can customize what type of cursor we want the user to have when they hover or click on an HTML element. The importance of cursor property is so that we can help the user identify easily and understand what action to take when hovered on an HTML element. Let’s see the first property.
1. Cursor: all-scroll
This cursor is commonly activated on the scroll bar of a page. For this property, use the following code for the class of your HTML element.
The output would be something like this:
2. cursor: cell
You might have felt familiar with the following cursor. This is because it’s the cursor that’s used by Microsoft Excel or Google Sheets when you hover or click on a cell. If you have never used Excel and never experienced this cursor, check out this video and also the image below.
The code is like this:
Okay, let’s see the next property now.
3. cursor: col-resize
This property may be common in using Microsoft Powerpoint. You may have seen this cursor when trying to resize an image in Powerpoint or even in Microsoft Word. Here’s how it looks like.
4. cursor: pointer;
This cursor is common for indicating a button or a link that should be clicked by a user. Here’s how it would look like when used:
The code would be:
cursor : pointer;
5. cursor: not-allowed
This type of cursor may be slightly familiar when hovering over some websites. For example, maybe when hovering on a section of a website which you’re not allowed to click, fill in, or edit. Here’s how this cursor looks like for you to get a better visualization: