Cursor invert color (black/white text)

chloe543268

@Richard-Keith said in Cursor invert color (black/white text):

span {
cursor:
url(https://chloegrienenberger.com/wp-content/uploads/2020/11/PERSONAL-IDENTITY-11.png) 2 6, auto !important;
}

Hi Richard, thank you for your feedback.

I showed you the code that I used while waiting to find a solution to do as on the site. I understood what you are proposing to me to do but I would like to try to do as on this site. Currently my hover is based on two images, but I think to have the color inversion on the text it must be a coded geometric shape and not an image?

It may be too complex to do or explain ... I still show you the images it is really the cursor hover which changes the color of the elements below.

thank you so much! Sans titre.png

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:

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