search

Home >Web Front-end >JS Tutorial >How to set cursor style to pointer of link without href?

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

王林
王林forward
2023-08-24 12:13:02688browse

如何将光标样式设置为没有 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>

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>

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 

<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 following example, we use the "cursor:pointer" style to style the cursor of a element without the href attribute to a pointer, as shown in Example 2, but we have applied # inline CSS to it. ## 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 use the "onmouseover" event attribute. Whenever the mouse pointer moves over the

mark, it calls the callback function assigned to it. Here, instead of assigning a callback function, we assign a line of CSS.

So whenever the user hovers over a

tag without the href attribute, the cursor style will be set 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

tag with the href attribute, but we have specified an empty string as the value of the href attribute. Therefore, it automatically acts as a null link and sets the cursor pointer for the 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 how to style the cursor as a pointer on a link without the href attribute. We use CSS to change the cursor style. Additionally, we use the onmouseover event attribute to detect mouseover events and change the cursor style accordingly.

The above is the detailed content of How to set cursor style to pointer of link without href?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to add Summernote Editor to a web page using Javascript?Next article：How to add Summernote Editor to a web page using Javascript?

Related articles

See more