Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set cursor style to pointer for links without href?
We can use the <a> tag in HTML to add a link to the web page. The default cursor style for the <a> elements is the pointer, but removing the href attribute from the <a> tag changes the cursor style.
So, in this tutorial, we will learn to keep the cursor style to pointer for <a> tags without the href attribute.
Users can follow the example below to check out the default cursor style for the <a> elements.
Default Behavior Example
In the example below, we have used the <a> tag to create three different links.
In the output, we can observe that when we hover on the first link, the cursor becomes a pointer as it contains a href attribute; for the second link, also cursor becomes a pointer as it also contains a href attribute with an empty string value, and when we hover on the third link, cursor style changes as it doesn't contain the href attribute.
<html> <body> <h2>Cursor pointer on the anchor texts</h2> <a href="https://www.tutorialspoint.com/index.htm">tutorialspoint</a> <br><br> <a href="">Cursor pointer</a> <br><br> <a>No cursor pointer</a> </body> </html>
Now, users understand how cursor style changes when we remove the href attribute from the <a> tag.
Below, we will look at examples of setting a cursor pointer for links without a href attribute.
Method 1: Using CSS Classes
Users can follow the syntax below to set a cursor pointer to the links without a href attribute using CSS.
<style>
.pointer {
cursor: pointer;
}
</style>
In the above syntax, 'pointer' is a class assigned to the <a> element, and we have changed the pointer style for elements containing the 'pointer' class.
<html>
<head>
<style>
.pointer {
cursor: pointer;
}
</style>
</head>
<body>
<h2>Using CSS to set cursor pointer on anchor texts without href attribute</h2>
<a class="pointer">cursor pointer</a>
<br><br>
<a class="pointer">No href attribute</a>
</body>
</html>
Method 2: Using Inline CSS
In the example below, we have used the 'cursor: pointer' style to set the cursor style to pointer for <a> elements without href attribute, but we have applied inline CSS to the <a> tag.
<html> <body> <h3>Using inline CSS to set cursor pointer on anchor texts without href attribute</h3> <a style="cursor: pointer;">cursor pointer</a> </body> </html>
Method 3: Using JavaScript onmouseover Event
In the example below, we have used the 'onmouseover' event attribute. Whenever the mouse pointer goes on the <a> tag, it calls the callback function assigned to it. Here, we have assigned one line of CSS rather than assigning the callback function.
So, whenever users hover the mouse on the <a> tag without the href attribute, it sets the cursor style to the pointer.
<html> <body> <h3>Using onmouseover event and CSS to add cursor pointer on anchor texts without href attribute</h3> <a onmouseover="this.style.cursor='pointer'">Link 1</a><br> <a onmouseover="this.style.cursor='pointer'">Link 2</a><br> <a onmouseover="this.style.cursor='pointer'">Link 3</a><br> <a onmouseover="this.style.cursor='pointer'">Link 4</a><br> </body> </html>
Method 4: Using Empty href Attribute
In the example below, we have used the <a> tag with the href attribute, but we have assigned an empty string as the value of the href attribute. So, it automatically works as an empty link and sets the cursor pointer for the <a> tag.
<html> <body> <h3>Assigning empty value to href attribute to add cursor pointer on anchor texts</h3> <a href="">Link 1</a><br> <a href="">Link 2</a><br> </body> </html>
Comparison
| Method | Pros | Cons |
|---|---|---|
| CSS Class | Clean, reusable, semantic | Requires CSS definition |
| Inline CSS | Quick, no external CSS needed | Not reusable, clutters HTML |
| JavaScript onmouseover | Dynamic control | Performance overhead |
| Empty href | Native browser behavior | Still creates a link (may navigate) |
Conclusion
CSS classes provide the most maintainable solution for setting cursor pointers on links without href attributes. Choose the method that best fits your project's architecture and requirements.
3K+ Views
