Modify mouse pointer when an object is clicked using JavaScript

Greetings, I am in the process of designing a website for a client.

I have encountered a challenge in changing the cursor icon when a user performs a mousedown on an object.

  1. There is an image on the webpage
  2. When the user clicks on the image, the cursor should change to "grabbing"
  3. The user should be able to drag and drop the image position
  4. Upon releasing the mouse click, the cursor should revert back to "default"

I attempted to implement these steps, but I faced difficulties in changing the cursor upon mousedown event.

Is it possible for JavaScript to change the mouse cursor at that specific timing? If so, how can this be achieved?

I have come across resources discussing "Change cursor on hover event," but none addressed the same scenario as described above.

javascriptvue.js

Answer №1

When working with HTML elements, you can easily customize the cursor using the CSS cursor property.

If, for some reason, you must use JavaScript:

document.yourSelector.style.cursor = "grabbing";

However, in most cases, it is advised not to resort to JavaScript for this task:

.yourImages:active { /* Change cursor when mouse is clicked */
    cursor: grabbing;
}

Answer №2

implement the :active pseudo-selector.

.image:active {
  cursor: grab;
}
<img src="https://via.placeholder.com/200x150,jpg" class="image">

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

Merging the outcomes of a JSON call

Presently, I have an async function that returns a JSON response in the form of an array containing two objects. Please refer to the screenshot. How can I merge these objects to obtain: [{resultCount: 100, results: Array(100)}] I attempted the followin ...

javascriptarraysjsonjavascript-objects

What are the limitations of using a JS file within an Angular application?

I am struggling to integrate some js methods from a file into an angular application. Unfortunately, the browser is unable to recognize the js file. I have tried following the guidelines in this SO post, but the browser still cannot locate the file in the ...

javascriptnode.jsangulartypescriptecmascript-6

Methods for altering the color of a div using addEventListener

Why doesn't the color change when I click on the div with the class "round"? Also, how can I implement a color change onclick? var round = document.querySelector(".round"); round.addEventListener("click", function() { round.style.backgroundCol ...

javascripthtmlcss

Tips for achieving seamless scrolling with the combination of javascript and css

Looking for a solution to achieve smooth scrolling on an HTML page without using the #id_name to scroll to a specific div. Instead, I want to scroll to a particular point, such as having a button that scrolls down the webpage smoothly by 250px when press ...

javascripthtmlcss

Navigating within components using code is an essential skill when working with Vue Router

I am currently developing a Quasar application powered by Vue 3 with vue-router version 4 All my routes are properly configured and function well when navigating from a component template using <router-link to="/route">Go to route</rout ...

typescriptvue.jsvue-routervuejs3

How can Vue be used to dynamically change the input type on focus?

What Vue method do you recommend for changing an input element's type on focus? e.g. onfocus="this.type = 'date'" I am specifically looking to switch the input type from text to date in order to utilize the placeholder property. ...

javascripttypescriptvue.jsvuejs3vue-composition-api

I'm looking for a solution to implement a vertical carousel in Google's Materialize CSS without the need for custom development

Looking to create a unique vertical scrolling "carousel" using Google's Materialize CSS library. I have a good understanding of the steps required to construct a carousel. # haml %ul.carousel %li.carousel-item Some Content %li.carousel-item ...

javascriptjqueryhtmlcssmaterialize

Having trouble getting Vue to dynamically change images on mouseover?

Within my Vue application, I have successfully displayed an image using the following code: <img src="@/assets/images/icon-filter-up.png"> However, when I attempt to dynamically pass the image link like this: <img :src="imgLink"> And within ...

vue.js

Result of utilizing Bootstrap Radio buttons

Looking at the HTML snippet below, I am trying to display two lines of radio buttons. However, when I click on a radio button in the first line and then proceed to click any radio button in the second line, the result of the radio button in the first line ...

javascripthtmlformsdombootstrap-4

Embedding a label's text directly as HTML code in an ASP.NET page

I attempted this CABC</td><td valign="top"><span class="progressBar pb3">document.getElementById('<%#Label8.ClientID%>').innerHTML</span></td></tr> I am trying to incorporate a jQuery script for a sales ...

javascriptjqueryasp.net

Exploring data segments in Knockoutjs using various models

I'm trying to figure out why Knockout.js won't allow me to access specific parts of the model data. Could it be because I am binding the model to the div that contains all the submodels (such as the Form in this example), or am I approaching this ...

javascriptknockout.js

calling requestAnimationFrame from within a freshly created instance

I'm encountering an issue with executing an animation. Specifically, this problem arises within var ob1 = function() {};. Once triggered, the animation runs for a brief period before I receive the error message Uncaught RangeError: Maximum call stack ...

javascriptthree.jsrequestanimationframe

Accessing PUT/POST/DELETE endpoints directly from the backend through the browser without the need for UI connectivity

How can PUT/POST/DELETE methods be implemented in NodeJS directly within the browser? router.put('/sync/:syncId', (req, res) => { res.send(JSON.stringify({ "status": 200, "error": false, "response": "HELL ...

javascriptnode.jsrestexpress

Sending database data from PHP to JavaScript - mysql_fetch_array behaving unexpectedly

Forgive me if there is already an answer out there to my question, but after a week of searching online and experimenting, I decided to turn to the experts for help. Purpose: My goal is to query an SQL database using server-side code (specifically PHP), t ...

phpjavascriptajaxarraysassociative

Concealing a div based on a condition

Having difficulty concealing a div once a specific condition is met. The condition depends on the user logging into a web application. In my CSS file, I have set the multipleBox div to visibility: hidden, along with other styling attributes like border co ...

javascripthtmlcssajaxjsf

Typescript - type assertion does not throw an error for an invalid value

When assigning a boolean for the key, I have to use a type assertion for the variable 'day' to avoid any errors. I don't simply do const day: Day = 2 because the value I receive is a string (dynamic value), and a type assertion is necessary ...

javascripttypescript

Exploring nested documents in mongoDB with mongoose

As a novice full stack web developer, my current project involves creating a movie rating website. To achieve this, I have set up a user schema using mongoose with a ratings subdocument. Here is an example of the schema: const ratingSchema = new mongoose. ...

javascriptnode.jsmongodbexpressmongoose

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

My goal is to extract all CSS references from an external stylesheet, such as <link rel="stylesheet" href="css/General.css">, and add them to the existing styling of each HTML element on my page (converting all CSS to inline). The reason for this re ...

javascriptjqueryhtmlcss

There are a few steps to take in order to sort an array of objects by a

I want to organize and display data in a sortable table format javascript let dataList = [ { idx: number, name: string, btn: number, index: number }, { idx: number, name: string, btn: number, index: number }, { idx: number, name: string, btn: number ...

javascriptangularsortingngfor

Use vtip jQuery for showcasing titles

Currently, I am utilizing the vTip plugin for displaying titles upon hover. Here is a snippet of my code: http://jsfiddle.net/bnjSs/ In my HTML, there's a Div with the ID #showTitles. Whenever this Div is clicked, I aim to toggle the display of all ...

javascriptjquery