Changing the Cursor with CSS Events

Is there a way to make the cursor change on a specific event without manually specifying every element that needs to change? For example, I want the cursor to switch from pointer to progress for all elements without having to list them individually like this:

a, input[type='button'], button {
    cursor: progress;
}

I just want a simple solution to replace the cursor from pointer to progress universally. Is this achievable with JavaScript or any other method? If so, please provide guidance. Thank you in advance!

javascriptjqueryhtmlcsscursor

Answer №1

It appears unlikely that determining the cursor style in a browser is feasible. The styling for the cursor, as observed only in Chrome, typically defaults to "auto" or "default". Therefore, even when using JavaScript to inspect an element's style, it may not be possible to discern the specific cursor being utilized unless explicitly defined in the CSS.

To validate this theory, consider running the following jQuery snippet:

Javascript:

console.log($('button').css('cursor'));
console.log($('input[type="submit"]').css('cursor'));
console.log($('a').css('cursor'));

HTML:

<button>TEST</button>
<input type="submit"/>
<a href="#">TEST</a>

Answer №2

Does this match your desired criteria?

a:hover,
button:hover,
input[type="button"] {
  cursor: wait;
}

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

Unable to maintain checkbox state after page reload in React

I am currently working on creating a to-do list application using React and Material UI. Everything is functioning well except for the checkbox state. I am storing each to-do as an object in an array called todoList in local storage, like this: todoList i ...

javascriptreactjsmaterial-uilocal-storageuse-effect

Is it possible to use AJAX to switch out select options?

I am dealing with a situation where I have three dropdowns, and the value of the first one depends on the second, which in turn depends on the third. The issue arises when users make changes to the second dropdown - the third one appends new options instea ...

jqueryajax

Node.js poses a challenge when it comes to decoding incoming request data

I am attempting to create a sample login page using the combination of node, express, and angularjs. Displayed below is my login view: <div class="login-page"> <div class="login-page-content"> <div style="margin-top:30px;padding:10px;w ...

javascriptnode.jsangularjsexpress

Looking to enable form resubmission with Rails AJAX functionality

Creating an application where I need to implement the functionality of adding people to a department using AJAX. The issue I am facing is that while I can remove people from a department multiple times, I am unable to add them more than once. It appears th ...

ruby-on-railsajaxformsjquery

Exploring visible faces of three-dimensional objects using Three.js camera frame

Searching for a way to identify the visible faces of a Mesh with respect to a PerspectiveCamera. I am not concerned about obscured or unobscured faces, just those that fall within or outside the camera's view. For instance, when observing a sphere and ...

javascriptthree.js

Alter jquery on mouse click

Hello, I am currently in the process of creating an online photo album. The concept involves displaying a picture with two elements that have onclick events to navigate to the next and previous images in the album. I have written a function for this purp ...

jqueryonclick

Leveraging Webworkers in an Angular application for efficient data caching with service workers in the Angular-CLI

I am looking to run a function in the background using a worker, with data coming from an HTTP request. Currently, I have a mock calculation (e.data[0] * e.data[1] * xhrData.arr[3]) in place, but I plan to replace it with a function that returns the actual ...

javascriptangularangular-cliservice-workerweb-worker

Combining JSON elements from a jQuery Ajax response into an array

I have a python script running with ajax, and I am working on interpreting the result. For reference, you can check out this jsfiddle as my json data closely resembles it. var j ='[{"id":"1","name":"test1"},{"id":"2","name":"test2"},{"id":"3","name" ...

jqueryjson

The process of accessing files from the filesystem using AngularJS

I have a JSON file that I want to use in my Angular application. I came across a discussion here suggesting the use of $http.get to load JSON from the filesystem. However, I am encountering an issue where I keep getting a "http://localhost:9000/jsonFile.js ...

javascriptjsonangularjs

Local comparison causing unit test failure

Uncertain as to why this is not working properly with Dojo doh.t(formatedValue.localeCompare("16,91 $CA") === 0, "incorrect french formatting") The value of formattedValue is definitely "16,91 $CA" so I am certain it should be a match. However, when I at ...

javascriptdojo

The output is displaying an Object instead of a numerical value in JSON

When I try running the URL in Chrome, the output I receive is: { "Train_score": { "0": 0.9892473118 }, "Test_score": { "0": 0.9831932773 } } However, when I attempt to use the following code to retrieve the JSON data using Javascript, co ...

javascriptjsonobjectvisual-studio-codeweb-development-server

How to implement pagination with subdocuments in Node.js using Mongoose

My attempt to paginate a subcomment named "Items" within a collection using mongoose-paginate-v2 has not been successful. Below is my model: const mongoosePaginate = require('mongoose-paginate-v2'); const PettyCashItemsSchema = ...

javascriptnode.jsmongodbexpressmongoose

Identify the XML variable within the XSL file and confirm its existence by responding with a res

I am facing issues with the Xpath expression test="$roles/roles/role='HOBSCS1GB'" . Is there anyone who can assist me in resolving this problem? Thank you. <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl ...

htmlxmlxsltxpath

The progress event of the XMLHttpRequest updates quickly, outpacing the speed of the upload itself

I've been working on setting up an upload form and using xhr to return the upload status to the user. Everything seems to be in place, but I'm facing a strange issue where the callbacks are happening too quickly and showing a higher percentage th ...

javascriptjqueryajaxxmlhttprequest

What is the best way to include extra form information when using ajax?

Is there an alternative method for transmitting form data that can be used with the current script? I attempted to append form data, but am struggling to extract the paired values in the post data. As a workaround, I included the data in the URL, however, ...

javascriptphpjqueryajax

The problem of asynchronous communication in Ajax

Currently, I am in the process of developing a mobile application using backbone.js. The main functionality of the app involves users selecting football players for a team. To enhance user experience, I aim to implement a feature that remembers player sele ...

jqueryajaxbackbone.js

Guide to integrating custom fields in Wordpress with mapbox-gl js to generate map markers

Currently, I am in the process of generating a map that will display various points using Mapbox and WordPress. To achieve this, I have set up a custom post type within WordPress where the coordinates are stored in custom meta fields. Although the fields h ...

javascriptphpjsonwordpressmapbox

Is it possible to read an XML response as a stream using Ext JS?

Requesting an XML response can sometimes result in a slow completion time due to certain constraints. Despite this, the data begins returning quickly. I am wondering if it is feasible to read the response stream in Ext JS before it is fully complete. My u ...

javascriptajaxhttpextjsstreaming

Creating HTML code for a mobile responsive design

I am facing an issue with my clinic webpage where the images appear differently on PC and mobile devices. I am new to HTML and CSS, so I tried using max-width: 100% but it didn't work. The code was originally created by someone else and I need help fi ...

htmlcssresponsive

Troubleshooting the issue of PHP $_POST trimming the '<' character received from $.post in jQuery

Having an issue here that seems like it should be a simple fix. For some reason, when I try to send the character < (along with any characters that follow) to $_POST, it just doesn't want to cooperate. To give you some context, my max_input_vars is ...

javascriptphphtmlpost