How to change the cursor when the user clicks?

Question

I am trying to make a custom cursor for a website, which when clicked, anywhere on the page, the cursor changes to another image, until the button is unclicked when it will revert back to the original cursor.

body {
    cursor: url('images/cursor.png'), auto;
}

Does this answer your question? [Using external images for CSS custom cursors](https://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors) — Ron, May 05 '20 at 20:02

The Fool · Accepted Answer · 2020-05-05T20:14:23.943

1

You could simply use an onclick event listener on the body itself.

document.body.onmousedown = () => {
  document.body.style.cursor = "not-allowed"
}

document.body.onmouseup = () => {
  document.body.style.cursor = `pointer`
}

body {
  height: 100vh;
  background: aliceblue;
  cursor: pointer;
}

edited May 05 '20 at 20:14

answered May 05 '20 at 20:05

The Fool

16,715
5
52
86

I imagine you'd need mouse down/up if you want to revert once the click is complete. – DBS May 05 '20 at 20:07
Yes I, guess you could to that. – The Fool May 05 '20 at 20:08
@DBS could you tell me how I would go about doing that? – SirArchibald May 05 '20 at 20:08

Temani Afif · Answer 2 · 2020-05-05T20:09:35.210

1

Use :active on the html element:

html:active {
    cursor:pointer; /* url('images/cursor.png') */
}

html {
  min-height:100%;
}

<h1>title</h1>
<p>some text</p>

edited May 05 '20 at 20:09

answered May 05 '20 at 20:08

Temani Afif

245,468
26
309
415

Man I was just thinking if active would work, How about event delegation here? Will children cause issues? – The Fool May 05 '20 at 20:09
@TheFool what kind of issues? – Temani Afif May 05 '20 at 20:11
if you have children inside, and you active actuallly the child and not the html tag itself. Lets say a button or input. – The Fool May 05 '20 at 20:13

score 0 · Answer 3 · answered May 05 '20 at 20:41

<html>
<head>
<style>
.default_cursor {
    cursor: url('images/default.gif'), auto;    
}
.changed_cursor{
    cursor: url('images/changed.gif'), auto;
}
</style>
</head>

<body id="body" class="default_cursor">
Content Here

<script>
document.addEventListener("click", function(){
  document.getElementById("body").classList.toggle("changed_cursor"); //Toggle cursor.
});
</script>

</body>

</html>

How to change the cursor when the user clicks?

3 Answers3