Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How can I hide the hand cursor when hovering a link?

Dan001

Coder
Hello

I have a JS & CSS code. I am not a developer at all :). I don't know what I have to change in the code to achieve the desired effect


My question is How can I hide the hand cursor when hovering a link?

Below the CSS et JS CODE

Thank you for your help :)



CSS CODE

--------------

<style>

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;

}



}

</style>





JS CODE

------------

<script>

function createCustomCursor() {

let cursor = document.getElementById('myCustomCursor');


if (cursor) {

console.log('myCustomCursor already exist');

addCursorSpecialEffectToAllPageLinks(cursor);

} else {

cursor = document.createElement("div");

cursor.setAttribute("id", "myCustomCursor");

document.body.appendChild(cursor);


initCustomCursor(cursor);

addCursorSpecialEffectToAllPageLinks(cursor);

}

}



function initCustomCursor(cursor) {

document.body.onmousemove = function(e) {

cursor.style.setProperty('--x', (e.clientX) + 'px');

cursor.style.setProperty('--y', (e.clientY) + 'px');

}

}


function addCursorSpecialEffectToAllPageLinks(cursor) {

var links = document.querySelectorAll("a"); // Get page links


// This ״for loop״ is used to find all the page links and add the "myCursorHoverState" css class to create special effect on hover

for (var i = 0; i < links.length; i++) {

links.addEventListener("mouseenter", function(event) {

console.log('In');

cursor.classList.add("myCursorHoverState"); // Add the hover class

}, false);


links.addEventListener("mouseleave", function(event) {

console.log('Out');

cursor.classList.remove("myCursorHoverState"); // Removethe hover class

}, false);

}

}



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


</script>
 
Heya man,

You haven't entirely specified that this needs to be done using only Javascript, so we can do this quite easily by just using our CSS.

To achieve the goal, you are looking to get by specifying a specific element/class/id that you want to apply this effect to. In this case, I'm just going to keep it simple by using the plane anchor tag, but this can, of course, be applied to any element.

Next up, we need to select a specific pseudo-class. Because you mentioned that you are not a developer, I think it's important to understand the concept of pseudo-classes.

In HTML, we have certain states that can be triggered in certain situations; a perfect example of this is when the element has been hovered over. Because we want the cursor only to vanish when they move over a link, we'll make use of the "hover" pseudo-class.

CSS:
/*Notice the : ? Ths colon allows our CSS to pick up on this being a pseudo class*/
a:hover {
}

Now that we've applied this effect to the anchor tag when we hover it all we need to do is set the cursor to none within this CSS block.

CSS:
/*Notice the : ? Ths colon allows our CSS to pick up on this being a pseudo class*/
a:hover {
    cursor: none;
}

I hope this helps! Feel free to reply if you need any more explanations or additional help!
 
I'm going to shoot blind here, but I'm going to assume that the below is your CSS for the button/link.

CSS:
#myCustomCursor.myCursorHoverState {

    cursor: none;

    width: 90px;

    height: 90px;

    background: pink;

}

All we need to do here is add another section but for our hover state

CSS:
#myCustomCursor.myCursorHoverState:hover {
    cursor: none;  
}
Notice this code block above has the hover added to it.

If this does not work, can you provide the HTML and CSS for the button/link? This way, I can then see what part is doing what.
 
Below my CSS code that dosn't work . Can you check it please :blush:

CSS:
<style>



 body {

        cursor: none;

        min-height: 100%;

        background: rgb(0, 0, 0);

    }

    

    #myCustomCursor {

        cursor: none;

        position: fixed;

        width: 30px;

        height: 30px;

        background: #1B1C1E;

        border-radius: 50%;

        top: var(--y, 0);

        left: var(--x, 0);

        transform: translate(-50%, -50%);

        mix-blend-mode: normal;

        pointer-events: none;

        transition-duration: 40ms;

        transition-timing-function: ease-out;

        z-index: 999999!important;

    }






  #myCustomCursor.myCursorHoverState {

    width: 90px;

    height: 90px;

    background: pink;


}

#myCustomCursor.myCursorHoverState:hover {
    cursor: none; 
}





</style>
 
I don't have the HTML code just the CSS. I made the website with editorx
So this will cause things to be a little bit more confusing as we need to know what the elements' class name/id is so that we can manually manipulate it using CSS. Alternatively, if they by default use <a> tags then we can simply do this.

CSS:
a:hover {
    cursor: none;
}
 
I don't have the HTML code just the CSS. I made the website with editorx
You do have the HTML code regardless what design tool you used. Just right mouse click in your page and choose "View page source". Alternatively you right mouse click on the element in question and choose "Inspect". This will tell you the class and id, and anything else you want tp know about that element.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom