Preventing cursor change on link click in Chrome

Clicking on a link in Chrome (not Safari or Firefox) changes the cursor from pointer to arrow. Can this behavior be prevented? I.e., is it possible to still have the pointer after clicking, but while the cursor is still hovering over the link?

EDIT: Okay so I've done a little more testing. First of all, the only reason anyone would want the cursor to remain as a pointer after clicking on a link is if the link does not actually load another page but rather fires a JS event instead.

<a href="test">Test</a>

// JQuery
$("a").click(function(event) { event.preventDefault(); }

With the above code, event.preventDefault (or returning false) will allow the cursor to remain a pointer after click. This will suffice for most uses, namely triggering a DOM manipulation and/or AJAX request.

The problem is with history.pushState():

<a href="test">Test</a>

// JQuery
$("a").click(function(event) {
    history.pushState(arg1, arg2, url);
    event.preventDefault(); return false;

Here the pointer DOES change to an arrow. Any ideas on how to stop that from happening?



This sounds like a CSS issue. Look for code like the following:

::-webkit-any-link:active { cursor: pointer; }

This will affect all links (like a[href]) but only in WebKit. Perhaps something else is preventing Safari from doing this.


Now that we know more about the problem, namely that the cursor changes back to a pointer after clicking on an element fires off a javascript, I would say that this is a Chrome bug.

Please file a report at


You could explicitly set your target element's CSS to include --

#element {
    cursor: pointer;

See if you have to support IE 5.5.


In the meantime I'm thinking this desperate workaround:

  1. Browser detect Chrome
  2. Apply this tutorial


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.