HTML custom hover cursor pointer

Question

Goal: I got certain svg circles in place, which are nodes from a D3 graph. I added a darkmode toggle and want to replace the default pointer cursor with an Xwing image. This should only be visible if I hover over an circle. All other elements are excluded.

Problem: I know how to change the cursor in general, like shown below, but I do not know how to change the cursor during an specific hover event. Any idea?

body {
    cursor: url("Xwing.png"), auto
}

what you mean by specific hover event? its a element based hover or js event — prasanth
– prasanth, Commented Mar 25, 2021 at 13:20
If I would hover over an circle element for example, I do not want the effect for all hover events. Like include circles and exclude buttons etc. — ICoded
– ICoded, Commented Mar 25, 2021 at 13:21

prasanth · Accepted Answer · 2021-03-25 13:36:41Z

1

You could do with pseudo-class :not

If you need to show the cursor image to all use body or * instead of .circle

updated for toggle

.circle:not(.excludedClassName) {
  cursor: url("Xwing.png"), auto
}

/*disabled if dark class match*/
.dark .circle:not(.excludedClassName) { 
  cursor: pointer !important; /* it will overwrite the cursor*/
}

edited Mar 25, 2021 at 13:36

answered Mar 25, 2021 at 13:24

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ICoded Over a year ago

Got you but how can I enable / disable this with with the help of a toggle? For example if darkmode disabled, cursor: pointer else if darkmode enabled cursor: url(Xwing.png), auto

prasanth Over a year ago

you will control based on global parent component class. Check my updated answer

Collectives™ on Stack Overflow

HTML custom hover cursor pointer

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related