Cursor invert color (black/white text)

chloe543268

Hi, I custom my cursor to have a circle, you can see it on my website. I used this code :

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

I'd like to have an inversion of color when it hovers over a text. Here's an example . I'll search on other forums and I found some codes but it didn't work. Do you have any ideas how to do it ?

Many thanks in advance!

Richard

Dear @chloe543268

You have something working when you hover over a link:

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

The <a> tag is for links so when hovering over 'a' we get this change but we also need to specify other types of elements on your page.

Try adding this to work with all 'span' elements too:

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

And let me know what you think? :)

Best wishes, thank you for using Lay Theme and have a wonderful day!

Richard

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!

Cursor invert color (black/white text)

Try this to fix issues before you post:

Online Users

Recent Topics