CODEWITHSUNDEEP
javascriptcsscursor
mallu coder
mallu coder

Reputation: 123

Change cursor to default in anchor tag using javascript

I have an anchor tag in which I removed the href attribute through JavaScript. I had also used setAttribute to add style="cursor:default;" But still the hand pointer is being displayed on hovering over the text. What is that I am doing wrong here.

HTML

<li>
<a class="menu-item" href="www.google.com" > 
 <span>Link Text</span>
</a>
</li>

JS

window.onload=function removeLink()
{
menuItem.removeAttribute("href");
menuItem.setAttribute("style","cursor:default;");
}

After page load html becomes like this

<li>
<a class="menu-item" style="cursor:default;" > 
 <span>Link Text</span>
</a>
</li>

When the page is rendered these changes are visible in the code, But still i get the Hand pointer on hovering over the link

I have already tried using menuItem.style.cursor="default"; And also tried to set it through css

CSS

.class a:hover{
cursor:default;}

Upvotes: 0

Views: 4521

Answers (3)

Revathi P
Revathi P

Reputation: 51

You can make a link unclickable like this, using the simple css. This works in mobile devices and desktop also.

 a {
    pointer-events: none;
    cursor: default;
    }
<a href="https://www.google.co.in/">Unclickable link</a>

Upvotes: 1

SK.
SK.

Reputation: 4358

Read here: Mouse Coursor 1, Mouse Coursor 2

Try this:

document.getElementById("anchor").style.cursor="default";
<a href="https://www.google.co.in" id="anchor">Google</a>

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

Using setAttribute is unreliable if you want the change to be reflected in the document. Use Element.style instead:

menuItem.style.cursor='default';

Upvotes: 0

Related Questions