Need your help ๐Ÿค— : How do I remove hand (pointer) cursor

Ask the community
1

Is it possible to remove the hand cursor that appears when hovering over a link? :blush:

Below my CSS et JS code.

I do not know where to change the code :hugs: Iโ€™m not at all an expert in coding.

thank you for your help :blush:

CSS code

body { cursor: none; min-height: 100%; background: rgb(0, 0, 0); } #myCustomCursor { position: fixed; width: 30px; height: 30px; background: #000000; border-radius: 50%; top: var(--y, 0); left: var(--x, 0); transform: translate(-50%, -50%); mix-blend-mode: normal; pointer-events: none; transition-duration: 50ms; transition-timing-function: ease-out; z-index: 999999!important; } #myCustomCursor.myCursorHoverState { cursor: none; width: 90px; height: 90px; background: pink; } }

JS code

1 Like
2

Hey @jawd-allal , Iโ€™m not an expert in code, but this might work by using media-queries in your JS code. Read here: https://css-tricks.com/working-with-javascript-media-queries/

The end of your code then might look like the following:

function myFunction(x) {
if (x.matches) { // If media query matches
createCustomCursor();
}
}

var x = window.matchMedia( โ€œ(min-width: 1001px)โ€ ) //desktop
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

@matanyad , what do you think?

3

@evesilberx

hello Eve thank you for your help :blush: and your code.

Iโ€™m not at all an expert in coding too :blush: Iโ€™m a creative.

The problem is I donโ€™t know where to put exactly this code and how to use it.

4

Depending on the provider, it may support Javascript to only be visible on a set screen width or you could customize the CSS to support it too.

@iloveditorx , this is a little similar to your example for a custom cursor . Do you know how you could customize this?

5

I would think itโ€™s added to the bottom of the Javascript portion which is the functionality of the code. So the part of the code that states JS code.

6

@jawd-allal try pasting the code where you currently call the createCustomCursor() function (right at the end of your script). Delete the createCustomCursor() function and instead of it place the code I previously wrote you. I hope this helps.

1514ร—932 85.8 KB

7

Replying to

Hey Eve

Thank you so much that works :blush: .

Is it possible to have the cursor not show up when hovering over a link?

The hover effect doesnโ€™t works on Gallery Pro

Thank you :smiling_face:

8

9

Hi @jawd-allal , check out this amazing tutorial by @iloveditorx with an updated addition regarding special links effect: https://www.youtube.com/watch?v=WBsJiCZ9ltM

I hope this will be of help.

10

I had already watched. He does not say anything about it :hugs:

11

Close to the end of the video (around minute 6:30) he shows how you can remove the cursor effect when hovering over links. Watch till the end :wink:

12

Hello Eve, thant you very very much for your help :wink:

I donโ€™t want the hoever effect dissapears. I just want to hide the hand Cursor when I have a hoever effect :blush:

Sorry I I havenโ€™t been enough clear. :blush:

And he didnโ€™t say anything about why the hoever effect doesnโ€™t works on Pro Gallery :blush:

13

@jawd-allal , you have 2 options. Either add to your CSS:

a:hover {
cursor: none;
width: 90px;
height: 90px;
background: pink;
}

or try adding the following in your current code:

[#myCustomCursor](https://www.editorxcommunity.com/forum/search/~num~myCustomCursor) .myCursorHoverState { 
    cursor: none  **!important** ;         
    width: 90px; 
    height: 90px; 
    background: pink; 
}

Regarding the Pro Gallery, if it doesnโ€™t work, could be that itโ€™s because the Pro Gallery is not a link (he talks about this in the video as well).

I hope this helps.

14

I just tried. Unfortunately, that doesnโ€™t work. I have always the hand cursor :pensive::sob:

15

@jawd-allal send me a link to your live site. Iโ€™d like to take a look. Thanks.