0

I am using Vue 2, on the html I have an image which has white background, with a colorful object on the middle. Is it possible to detect and change the mouse cursor, based on the background color of where the mouse cursor is? Like, when on the white parts, against the actual object image (anything not-white).

Let's say it's an image like this. I want the cursor to change to pointer anywhere on the image where the background is not white.

https://www.vecteezy.com/vector-art/2751371-apple-with-a-white-background

Note: JQuery is not an option on this project

Thanks.

Ali Makhmali
  • 1
  • 1
  • 1
  • What kind of element is your _colorful object_? Can you upload a snippet of what you've tried? – Nora Dec 23 '21 at 21:19
  • have a look at this thread: https://stackoverflow.com/questions/10866471/javascript-how-to-change-mouse-cursor-to-an-image . – ca1c Dec 23 '21 at 21:22
  • You cant change the cursor color, you can only change its image that needs to be in `.cur` format. – Gabriel Nuñez de Andrade Dec 23 '21 at 21:22
  • Thanks, I don't want to change the cursor color, I want to change the cursor, e.g. from pointer to crosshair. @Nora I will upload an image to show – Ali Makhmali Dec 23 '21 at 21:25

1 Answers1

0

You can't check the color that the mouse touches, but you can just use a css rule to set the cursor for a specific element, as used the example you linked.

img {
  cursor: zoom-in;
}

See more info on mdn

skara9
  • 4,042
  • 1
  • 6
  • 21