Cursor invert color (black/white text)

Richard · wrote on Nov 17, 2020, 10:36 PM

There are ways to 'invert' colours on hover:

https://davidwalsh.name/invert-colors-css

https://davidwalsh.name/demo/invert-colors-css.php

Is that what your were after when you referred to it being an image? :)

Best
Richard

chloe543268 · wrote on Nov 23, 2020, 9:59 AM

Hi Richard, yes exactly ! But the color inversion must be done only inside the cursor shape (a circle). As in this example : https://centralstudio.ch/

If you can help me to do it (if it's not too complicated) it would be amazing!
Thank you

Richard · Nov 27, 2020, 7:00 PM

Dear @chloe543268

Happy to help.
This was fun to look into, its a nice trick they have done :)

So its actually not a Cursor in the general sense - its an element ( box ) that moves in place of the cursor:

You will need to add the following code into 'Lay -Options - Custom CSS & HTML'

At the top of the page in 'Custom CSS':

.pointer {
    cursor: none;
    background-color: #fff;
    position: fixed;
    text-align: center;
    width: 52px;
    height: 52px;
    z-index: 1000;
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: difference;
    overflow: hidden;
    border-radius: 50%;
}

NOTE: this 'background-color: #fff;' will be your starting colour so if your webpage has a black background you will see it but with a white background it will blend in. - you can change it to suit your needs

Secondly in the ' Custom <head> content' add the following:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
    
  jQuery("body").append('<div class="pointer"></div>');
    jQuery("body").on("mousemove", function(e) {
	jQuery(".pointer").css({ top: e.clientY + "px", left: e.clientX + "px" });
	
});

  });
</script>

Remember to save at the bottom of the page and then have a look at your Webpage.

Its a cool effect, hope this helps and have a wonderful day. Let me know how you go! :)

Best
Richard

XLD · wrote on Dec 17, 2020, 4:33 PM

This post is deleted!

XLD · May 21, 2024, 12:10 PM

Re: Cursor invert color (black/white text)

Dear @Richard-Keith

I love this – thank you so much…

Two things:

(01)
The cursor (element box) blends in perfectly on a white background page. But when I navigate to a black background page, the mix-blend-mode only works after a manual browser refresh.

Can you help?

(02)
The default "arrow cursor" is still visible above the new custom cursor. Any idea why?

Many thanks in advance!

Richard · wrote on Dec 19, 2020, 1:51 AM

Hey :) @XLD

Could you post a link to your website? :)

If the question is in regards to when the cursor hits the edge of the browser and reverts back to standard - that is not a Lay Theme issue - this is a browser thing that is out of my hands :(

Best
Richard

evey_k · wrote on Feb 3, 2021, 6:08 PM

This post is deleted!

evey_k · Feb 3, 2021, 3:08 PM

This post is deleted!

alberto_califano · wrote on Mar 1, 2024, 10:41 AM

@Richard Hello, I wanted to have a cursor with mix blend mode and I was able to do it by using the code written here.

The only problem is that when I go from a page to another it stop to work, and the cursor become invisible.

Does anyone have any ideas on why that happen?

Many thanks,
Alberto

arminunruh · Mar 4, 2024, 12:07 PM

yea this code:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
    
  jQuery("body").append('<div class="pointer"></div>');
    jQuery("body").on("mousemove", function(e) {
	jQuery(".pointer").css({ top: e.clientY + "px", left: e.clientX + "px" });
});

  });
</script>

its wrong, because it adds a new pointer div everytime you go to a new page ^^

just do it like this instead:

jQuery(document).ready(function(){
    jQuery("body").append('<div class="pointer"></div>');
    jQuery("body").on("mousemove", function(e) {
      jQuery(".pointer").css({ top: e.clientY + "px", left: e.clientX + "px" });
    });
})

alberto_califano · wrote on Mar 4, 2024, 12:07 PM

@arminunruh Thank you so much! It works perfectly now.

LenaW · X XLD Dec 17, 2020, 4:37 PM

@XLD @Richard thanks for having this function explained, I bump into the same thing of also having the default "arrow cursor" still visible. How did you did you solve this in the end?
Many Thanks!
https://lenawinterink.com/category/test-work-category/

arminunruh · wrote on May 21, 2024, 1:27 PM

*, a{
cursor: none!important
}

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

maybe this

arminunruh · wrote on May 21, 2024, 1:28 PM

ur website runs so fast wow even here in brazil. which webhost did you get or which caching plugin do you use?

KW1 · wrote on Feb 18, 2025, 5:29 PM

Thank you for this topic and the explanations. One question: How do I manage to use the same effect, but use a customized .svg as shape? I'm stuck at the moment...

arminunruh · wrote on Feb 19, 2025, 7:45 AM

Ok so first off, if anyone just wants a inverted cursor, i think this should be the correct code:

In "Custom CSS":

*{
    cursor: none!important;
}
.pointer {
    cursor: none;
    background-color: #fff;
    position: fixed;
    text-align: center;
    width: 52px;
    height: 52px;
    z-index: 1000;
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: difference;
    overflow: hidden;
    border-radius: 50%;
}

in HTML at bottom:

<script>
jQuery("body").append('<div class="pointer"></div>');
jQuery("body").on("mousemove", function(e) {
	jQuery(".pointer").css({ top: e.clientY + "px", left: e.clientX + "px" });
});
</script>

previous code was using newpageshown to add the pointer div, but then it means it adds a new one every time you navigate on the page, thats not needed

arminunruh · wrote on Feb 19, 2025, 8:11 AM

to use a svg image, use https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

in HTML at bottom:

<script>
jQuery("body").append('<div class="pointer"></div>');
jQuery("body").on("mousemove", function(e) {
	jQuery(".pointer").css({ top: e.clientY + "px", left: e.clientX + "px" });
});
</script>

In "Custom CSS":

*{
    cursor: none!important;
}
.pointer {
    cursor: none;
    position: fixed;
    text-align: center;
    width: 52px;
    height: 52px;
    z-index: 1000;
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: difference;
    overflow: hidden;
    border-radius: 50%;
    background-image: url("http://localhost:10020/wp-content/uploads/2024/09/close-button.svg");
    background-position: center;
    background-repeat: no-repeat;
}

this is the part u change:
background-image: url("http://localhost:10020/wp-content/uploads/2024/09/close-button.svg");

get the url from wp-admin media library, when u click on an image u get File URL:

Lay Theme Forum

Cursor invert color (black/white text)

Before you post:

When you post:

Online Users