How to stop cursor from changing on link click in Google Chrome

Have you ever noticed that when you click on a link in Chrome (but not Safari or Firefox), the cursor changes from pointer to arrow? Is there a way to prevent this behavior so that the pointer remains even after clicking, while still hovering over the link?

UPDATE: After conducting some tests, it appears that the only time one would want the cursor to stay as a pointer after clicking on a link is if the link triggers a JavaScript event rather than loading a new page.

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

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

By utilizing the above code and preventing the default action, you can maintain the pointer cursor after clicking. This approach works well for actions like DOM manipulation or AJAX requests.

However, an issue arises with history.pushState():

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

// Implementing jQuery
$("a").click(function(event) {
    history.pushState(arg1, arg2, url);
    event.preventDefault();
}

In this scenario, the pointer cursor does change to an arrow. Any suggestions on how to address this behavior and prevent the cursor from changing?

Answer №1

It seems like the issue at hand is related to CSS. Keep an eye out for code similar to this:

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

This code will impact all links (such as a[href]) but specifically in WebKit. There may be another factor preventing Safari from executing this properly.

LATEST UPDATE BASED ON EXPANDED INQUIRY:

Considering the new information about the problem - that the cursor reverts back to a pointer after clicking on an element triggers a javascript event, it appears likely that this could be a bug specific to Chrome.

We recommend submitting a bug report at http://bugs.chromium.org/

Answer №2

To ensure your target element has the correct CSS styling, you can set it explicitly like this:

#target {
    cursor: pointer;
}


For more information on CSS cursors and compatibility with older versions of Internet Explorer, check out this link.

Answer №3

While waiting, I am considering an unconventional solution:

  1. Detect Chrome browser
  2. Follow the steps in this guide

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the art of manipulating Div elements using CSS for the optimal Print View experience

I have a table with several columns and 1000 rows. When I print the page, it breaks the rows onto different pages, showing the remaining rows on subsequent pages. I want to display the complete record in one go. Below is a sample code with only one row in ...

Guide to implementing this specific design using CSS within jQuery Mobile

Want to achieve the red circle effect using CSS. Currently working with jQuery mobile and AngularJS. Below is a snippet of my code: <div data-role="page" id="p2"> <div class="ui-bar ui-bar-d "data-role="header" > <a href="" data-role=" ...

What makes Twitter Bootstrap special that modal events function in JQuery but not in pure JavaScript?

When working with the Twitter Bootstrap modal dialog, there is a set of events that can be utilized with callbacks. For instance, in jQuery: $(modalID).on('hidden.bs.modal', function (e) { console.log("hidden.bs.modal"); }); I ...

Creating a Map in TypeScript from an Array

I have a series of TypeScript objects structured like this: interface MyObject { id: string, position: number } My goal is to transform this array into a map format where it shows the relationship between id and position, as needed for a future JSON ...

Ways to utilize the Math.max and Math.min functions within an Array

Attempting to use this approach on an array to retrieve both the minimum and maximum values proved unsuccessful. var array = [3, 6, 1, 5, 0, -2, 3]; var min = Math.min( array ); var max = Math.max( array ); document.write(max); ...

Firefox not supporting position fixed within relative parent

Two columns are displayed here, with the left column showing a list and the right column displaying information based on the selected element from the list. Due to the large size of the list, I implemented a feature where the right column stays fixed at t ...

Why does the del command delete the parent folder as well?

I am looking to remove all files within the ./dist/* directory while leaving the ./dist folder itself untouched (it should be empty once the task completes). const del = require('del'); gulp.task('clean:dist', function(cb){ del([ ...

What is a more efficient approach to managing the response from an asynchronous call other than using setState?

Utilizing javascript async await, I have been making service calls to the server in componentDidMount or componentDidUpdate. However, when I need to pass the response data as props to other components, I find myself updating the component's state with ...

What is the best way to deliver HTML content to an ASP.NET MVC JSON function?

Here is my jQuery code that I have written along with the json function called InsertMatlabJson. However, I am facing an issue where no text is being passed to the .NET json function. function insert() { var url = '<%=Url.Content( ...

Mastering React.js: How to Efficiently Pass Parameters to Event Handlers in Components without Using bind()

When utilizing a event handler that uses the keyword this (such as in the example handleClick using this.setState), it is necessary to bind the event handler with the keyword this. If not, you can utilize the arrow function. For instance: //Although this ...

The error message "data.map is not a function" is thrown in the getStatic

I am currently working on a blog project using Strapi in conjunction with Next.js My goal is to create dynamic pages by utilizing [id].js within the pages/posts/[id].js structure However, I've encountered an issue while attempting to map through the ...

Angular JS: How to dynamically add and remove checkboxes in ng-repeat?

Currently, I have successfully implemented a Miller column using Angular and Bootstrap. To view the functionality in action, you can check out the code snippet at this link. In the second column of my setup, clicking on a word opens up the third column. ...

Guide for retrieving the maximum length of an input field using JavaScript

Is it possible to retrieve the maxlength of an input field using JavaScript? <input type="password" id="password" maxlength="20" > I attempted to do this, however it only returns undefined console.log(document.getElementById("password").maxlength) ...

Error: SvelteKit server-side rendering encountered a TypeError when trying to fetch data. Unfortunately, Express is not providing a clear TypeScript stack trace

I've been monitoring the logs of the SvelteKit SSR server using adapter-node. After customizing the server.js to utilize Express instead of Polka, I noticed some errors occurring, particularly when the fetch() function attempts to retrieve data from ...

Error encountered when executing the npm run dev script

Attempting to follow a tutorial, I keep encountering an error related to the script. I've tried restarting the tutorial to ensure I didn't overlook anything, but the same issue persists. Working on a Mac using pycharm. In the tutorial (from Ude ...

Encountering an error message stating "Cannot read property of undefined on

I am encountering a persistent issue while setting up a client code, where the error message "Cannot read property '' of undefined" constantly appears. An unexpected TypeError occurs: Cannot read property ' ' of undefined Interestin ...

CSS Problem - Struggling to display <div> element in inline format

Here is the HTML code I am struggling with: @using (Html.BeginForm("Create", "BicycleSellerListing", FormMethod.Post, new { enctype = "multipart/form-data" })) { @Html.ValidationSummary(true) <fieldset style="margin:5px;"> <legen ...

CSS: Struggling to properly position two flex items

I'm having some trouble with the alignment in my flex container. The title is perfectly centered, but the breadcrumb content is not aligning correctly. Specifically, I want the breadcrumbs to be right-aligned and positioned 25px from the top within t ...

clear background with logo embossed

I have encountered an issue while trying to place my logo on a black background with transparency. Instead of the background being transparent, now my logo is also becoming transparent which was not my intention. Does anyone have any suggestions or ideas ...

The error message "Uncaught (in promise) ReferenceError: dispatch is not defined" indicates that

Currently, I am utilizing vuex with index.js and auth.js stored in the store folder. My goal is to perform a basic sign-in operation within my signin.vue by calling an action from the store. However, I encountered the error 'Uncaught (in promise) Refe ...