Cursor invert color (black/white text)

[Richard]

Dear @chloe543268

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]

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]

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]

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: