Can I change color of background around "CURSOR"?

Question

So I am trying some thing out with CSS and I got idea to change color of background but only around cursor. It doesn't matter if it is circle or whatever shape. Is it possible to do it with CSS and if not can I do it with JavaScript.

Example so I translate better what I wanted to do. Imagine screen is black and "CURSOR"(mouse) is torch and as you are moving it around color around is white and all other stays black.

I tried hover but as I expected it changes color of hole screen.

Definitely possible with JS. Create an element with a different color than the background and position it based on the mouse position. Using the [`mousemove event`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event) you can update the element's position when the mouse is moving. Probably also have to add an event listener for when the mouse leaves and enters the window. — Geshode, Oct 19 '22 at 08:33
Look at the mousemove event for JavaScript, and use that to create a shape at those coordinates? — Dark Hippo, Oct 19 '22 at 08:33
and here's an example from elsewhere [Flashlight Mouse Pointer](https://codemyui.com/flashlight-mouse-pointer/) — pilchard, Oct 19 '22 at 08:34

score 2 · Accepted Answer · edited Oct 19 '22 at 08:44

I believe the code from this CSS Tricks page, in an article written by Chris Coyier, is similar to what you're looking to do:

let root = document.documentElement;

root.addEventListener("mousemove", e => {
  root.style.setProperty('--mouse-x', e.clientX + "px");
  root.style.setProperty('--mouse-y', e.clientY + "px");
});

.mover {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  left: var(--mouse-x);
  top: var(--mouse-y);
}

<div class="mover"></div>

As for whether there is a pure CSS solution to this, I have yet to come across one, though I would be delighted to be shown otherwise.

score 0 · Answer 2 · answered Oct 19 '22 at 08:43

0

body { cursor : url( resim-yolu/resim.png ),auto;}

You can look https://www.sihirlifasulyeler.com/webtasarim/css-ile-imleci-degistirme

answered Oct 19 '22 at 08:43

Ugur Baran

108
6

Can I change color of background around "CURSOR"?

2 Answers2