How to set cursor style to pointer for links without href ?

Method 1: Using a CSS class for the links
A CSS class is created that changes the cursor property. The cursor property is used to specify the mouse cursor to be displayed when the mouse is pointed over an element. Using the ‘pointer’ value in this property will change the cursor to a ‘pointer’ indicating a link.

This class can then be used on any link that does not have any href property to show the pointer.

Syntax:



filter_none

edit
close

play_arrow

link
brightness_4
code

.pointer-link {
  cursor: pointer;
}

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>How to set cursor style 
      to pointer for links without href ?</title>
    <style>
        .pointer-link {
            cursor: pointer;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>How to set cursor style to
      pointer for links without href ?</b>
    
    <p>The <a> link below
      has the cursor style set to pointer.</p>
    
    <a class="pointer-link">Example link</a>
</body>
  
</html>

chevron_right


Output:
css-class-output

Method 2: Using the onmouseover event for each link to change the style
The onmouseover event is triggered whenever the mouse pointer is moved over an element or its children. The style property of the element is accessed and the cursor property is changed.
The cursor property is used to specify the mouse cursor to be displayed when it is pointed over an element. Using the ‘pointer’ value in this property will change the cursor to a pointer indicating a link.

This event can be used on any link that does not have any href property to show the pointer.

Syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

<a onmouseover="this.style.cursor='pointer'>Example link</a>

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>How to set cursor style
      to pointer for links without href ?</title>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>How to set cursor style 
      to pointer for links without href ?</b>
    
    <p>The <a> link below 
      has the cursor style set to pointer.</p>
    
    <a onmouseover="this.style.cursor='pointer'">Example link</a>
</body>
  
</html>

chevron_right


Output:
onmouseover-output



My Personal Notes arrow_drop_up

Maybe this silence is dangerous

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.