Home > Web Front-end > JS Tutorial > body text

How to set cursor style to pointer of link without href?

王林
Release: 2023-08-24 12:13:02
forward
579 people have browsed it

如何将光标样式设置为没有 href 的链接的指针?

We can use the tag in HTML to add links to web pages. The default cursor style for elements is pointer, but removing the href attribute from the tag changes the cursor style.

So, in this tutorial, we will learn to keep the cursor style as a marked pointer without href attribute.

Users can follow the example below to view the default cursor style of elements

Example

In the example below, we create three different links using the tag.

In the output, we can observe that when we hover the mouse on the first link, the cursor becomes a pointer because it contains the href attribute; for the second link, the cursor also becomes a pointer, Because it also contains an href attribute with an empty string value, when we hover over the third link, the cursor style changes because it does not contain an 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>
Copy after login

Now users understand how the cursor style changes when we remove the href attribute from the tag.

Below, we will look at an example of setting the cursor pointer for a link without an href attribute.

grammar

Users can follow the syntax below and use css to set the cursor pointer to a link without the href attribute.

<style>
  .pointer {
     cursor: pointer;
   }
</style>
Copy after login

In the above syntax, "pointer" is the class assigned to the element, and we change the pointer style of the element containing the "pointer" class.

Example

In the example below, we create two different elements and assign the "pointer" class to both elements. In the section, we added the inline styles for the page. We accessed the "pointer" class in the