Cursor invert color (black/white text)
-
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!
-
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
-
@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!
-
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 -
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 -
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 -
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 -
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
RichardRe: 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!
-
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 -
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@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 -
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" }); }); }) -
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" }); }); })@arminunruh Thank you so much! It works perfectly now.
-
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!
-
-
ur website runs so fast wow even here in brazil. which webhost did you get or which caching plugin do you use?
-
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
-
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:
-
A arminunruh referenced this topic on
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it