Is there a way to switch the cursor from grab to grabbing when the mouse is clicked down?

I am working on a draggable element and I would like the cursor to change to grab when hovering over it, and switch to grabbing when the user clicks and holds the mouse down.

My current implementation closely follows the recommended approach in the top answer of this forum thread. However, I have encountered an issue where the cursor only changes to grabbing once the mouse click is released (as mentioned in the thread's comments without a solution). Is there a way to update the cursor state while the mouse button is being held down?

Link to Minimum Reproducible Example

.outer-box {
  height: 250px;
  width: 250px;
  border: 2px solid black;
  cursor: grab;
}
.outer-box:active {
  cursor: grabbing;
}
<div class="outer-box"></div>

htmlcss

Answer №1

To achieve this effect, you can utilize the onmouseover, onmousedown, onmouseup, and onmouseleave attributes by linking them to individual functions that adjust the cursor type based on each specific event.

For example:

function() {
  document.getElementByClass("outer-box").style.cursor = "pointer";
}

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

running a WordPress website on a local server

I'm currently facing an issue with exporting my WordPress website locally. When I try to export it, I get an XML file, but with the All in One WP Migration plugin, it gives me a "WPRESS" file instead. I don't have the budget to pay for a business ...

htmlcssmysqlwordpresshosting

HTML with an intricate and dynamic table layout

I am attempting to design a dynamic table that looks like the one shown in this image: https://i.stack.imgur.com/0Bmur.png The challenges I face in creating this HTML table are as follows: It needs to be dynamic as it will display data from a database T ...

jqueryhtmlangularjs

What is the process for changing the border color of a material selection?

Is it possible to customize the border color of a material select element? I attempted changing the border color using css from: https://i.sstatic.net/mw9jq.png to this: https://i.sstatic.net/8b7w7.png Any suggestions on how to achieve this? Appreciate an ...

cssangularangular-materialmaterial-design

Instructions on submitting a form containing multiple select lists using the enter key

After researching various threads, I have come across solutions using the JS onkeypress function to trigger actions with input fields. However, in my case, I need to implement this functionality with a form that consists of multiple select lists instead of ...

javascriptphphtmlforms

"Despite using 'vertical-align: middle' on table cells, the alignment to the middle is not achieved when using AlphaImageLoader in IE6

I am currently working on aligning text within table cells that have a PNG Transparent background. To achieve this in IE6, I am using the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() method. However, I am facing an issue where the text is no ...

cssinternet-explorer-6vertical-alignment

Understanding Node.js document object

Hey, I'm currently trying to execute a JavaScript function on the server side using node.js, but I've encountered an issue. The function relies on accessing hidden values within the returned HTML using the document DOM, however, the document obje ...

javascripthtmlnode.js

When a new VueJS project is created, it failed to automatically install the necessary basic HTML files and folders

Hey there, I am completely new to Vue.js. Just recently, I installed the Vue.js/CLI and created a brand new project using vue create test. This prompted me to choose from three options: > Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3 ...

javascripthtmlvue.jsvue-clijavascript-framework

Tips for creating gaps between list items in a collapsible navbar

I am attempting to add spacing between the li items in my collapsible navbar However, the issue arises when I slightly minimize the browser window, causing the navbar to collapse incorrectly. See image below: https://i.sstatic.net/TdKb4.png Below is t ...

javascriptjqueryhtmlcsstwitter-bootstrap

I am looking for a way to access the currentTime property of a FlowPlayer object in HTML5, similar to the "timeupdate" event. Can anyone help me find an equivalent method?

$("video").on('timeupdate', function() { console.log(this.currentTime); }); Is there a way to display the currentTime of a flowPlayer object using JavaScript? ...

htmlflowplayer

Adjusting the dropdown select icon's color on hover in Material UI

I am currently working on a project using React.js and Material UI. My goal is to modify the color of the dropdown select icon when it is hovered over. However, I specifically want the color change to apply only to the icon itself and not the entire select ...

cssreactjsmaterial-uihoverdropdown

Collapsible Span with Maximum Width in Unique Twitter Bootstrap

UPDATED If I assign a max-width value to the .container element, it disrupts the alignment of my spans. <div class="container" style="max-width:940px"> <div class="row"> <div class="span4" style="background-color:#F00">1</div& ...

htmlcsstwitter-bootstrap

Modifying the value property of the parent element

Here is an example of the HTML code I am working with: <td value='3' style='text-align: center'> <select class='selection' onchange=''> <option value='1'>1</option> <opti ...

javascriptjqueryhtml

What is preventing me from accessing the hidden article using the URL with the hashname?

I've been searching for a solution, but so far nothing seems to work for me. I have a page with header and content sections. The content section is currently not visible. When I click on an item in the navigation menu, I want to hide the header and di ...

javascriptjqueryhtmlcssjsfiddle

What is the best way to create an input field along with a span element using the :before pseudo class?

My first question on StackOverflow is regarding adding a pseudo-class before an input type button for animation (http://codepen.io/anon/pen/emodKG). I understand that it's not possible to directly add something before an input, so I attempted to inclu ...

htmlcssresponsive-design

jQuery Auto-Refresh for Dynamic News Feed

Is there a way to have a news feed that updates automatically and in real-time? I am looking to have text appear in a timeline for my visitors as soon as I write it. For instance: ...

jqueryhtmlfeed

The alignment of the label button within the form-group is being set to the top

While using Bootstrap 4, I encountered an issue with aligning the save button in a form group because there was no label at the same level. Despite trying to follow an example from here, I still had to hard code margin-top to prevent the button from bein ...

htmlcssbootstrap-4

Place an image in a div so that it is centered both vertically and horizontally

I have been trying to center an image both horizontally and vertically, but it seems like my code is not working properly. Here is what I have so far: #parent { position: relative; float: left; width: 700px; height: 400px; overflow: hi ...

csshtmlimage

Leverage the power of Reactjs to add hover effects to a mapped

I am facing a challenge in styling the ListItem on hover. The issue arises when the list is dynamically generated, causing all list items to change style simultaneously when hovered over. How can I target only one element for styling? Below is the code sni ...

javascriptcssreactjsmaterial-ui

Unable to properly load the Kendo Tree View based on the selected option from the combo box in the Kendo UI framework

I am encountering an issue where the Kendo treeview is not populating with different values based on a selection from the Kendo combo box. I have created a JSFiddle to showcase this problem. http://jsfiddle.net/UniqueID123/sample In the scenario provided ...

javascriptjqueryhtmlkendo-uikendo-treeview

Angular-dc bar graph failing to display properly

I'm having some trouble creating a bar chart using crossfilter, dc.js, and angular-dc. The rowchart is working properly, but the barchart is not displaying the bars. When I inspect the element in Chrome, I can see the values, and when I force focus, t ...

javascriptcssangularjsdc.js