Cursor invert color (black/white text)

Richard

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

This post is deleted!

XLD

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

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

This post is deleted!

evey_k

This post is deleted!

alberto_califano

@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

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

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

LenaW

@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

*, a{
cursor: none!important
}

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

maybe this

arminunruh

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

KW1

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

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

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:

Screenshot 2025-02-19 at 09.05.14.png

Lay Theme Forum

Cursor invert color (black/white text)

Before you post:

When you post:

Online Users