Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
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.
Syntax
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.
Example
In the example below, we have created the two different <a> elements and assigned the ‘pointer’ class to both elements. In the <head> section, we added the inline style for the web page. We accessed the ‘pointer’ class in the <style> tag and added ‘cursor: pointer’ CSS to add the cursor of the pointer style.
<html>
<head>
<style>
.pointer {
cursor: pointer;
}
</style>
</head>
<body>
<h2>Using the CSS to set the cursor pointer on the anchor texts in the link without the href attribute </h2>
<a class = "pointer"> cursor pointer </a>
<br> <br>
<a class = "pointer"> No href attribute </a>
</body>
</html>
Example
In the example below, we have used the ‘cursor: pointer’ style to set the cursor style to pointer for <a> elements without href attribute as in example 2, but we have applied inline CSS to the <a> tag.
<html> <body> <h3>Using the inline CSS to set cursor pointer on the anchor texts in the link without the href attribute. </h3> <a style = "cursor: pointer;"> cursor pointer </a> </body> </html>
Example
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 the onmouseover event and css to add cursor pointer on the anchor texts in the link without herf 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>
Example
In the example below, we have used the <a> tag with the href attribute, but we have assigned the empty string as a value of the href attribute. So, it automatically works as an empty link and sets the cursor pointer for <a> tag.
<html> <body> <h3>Assigning the empty value to the href attribute to add cursor pointer </i> on the anchor texts</h3> <a href = ""> Link 1 </a> <br> <a href = ""> Link 2 </a> <br> </body> </html>
In this tutorial, we learned to set the cursor style to the pointer on the links without the href attribute. We have used the CSS to change the cursor style. Also, we have used the onmouseover event attribute to detect mouse-over events and change the cursor style accordingly.
2K+ Views
