Home > Article > Web Front-end > 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:02560browse
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>
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>
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>
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!