wow! thank you ♥ for this excellent instruction to use an icon as a cursor. With your help we easily switched the boring standard to our awesome red pretzelhead and our golden heartiness heart.
@@Victor-Duse awesome! Thanks for your message! By the way: Perfect time to be hungry for pretzels - as it‘s international pretzel day today - 26.April 🙌🥨♥️ - of course for us it‘s always pretzel day. Our saying is: life is a circle, sometimes a square, a triangle, a heart - and always a pretzel!
Thanks! Try to replace: :hover with :active in the CSS. That till apply the new image cursor when the mouse button is held down. Let me know how it goes! 🙂
Thank you for sharing this information! I have a question...what would be the code for the hover cursor of a specific page? I tried to reference the code for hover entire site along with specific page but attempting to compare and combine didn't give me a successful result.
To target a specific page, you could use this CSS: .page-id-123 { cursor: url('my-folder/my-cursor.png'), auto; } Just replace the page id for your specific page. Here's a guide on how to find the id for a specific page or post: www.elegantthemes.com/affiliates/idevaffiliate.php?id=40598&url=71886
@@hostsofmichael Well, the mouse cursor hovers the page all the time but if you want it to change it when hovering a specific element on the page, you need to target that elements class. If you want to display your custom mouse cursor when it hovers LINKS only, you could try to target all elements with links (a) on the page: .page-id-123 a { cursor: url('my-folder/my-cursor.png'), auto; }
@@Victor-Duse ahhh yes I meant to say hover over links 🤭 . I did try adding the "a" before but didn't succeed. I'll try again. Anyway, thank you for your time
@@hostsofmichael If an a link already has a CSS property, you might need to add !important to override it. Also, not all links are created with html (the a tag), some are injected with JavaScript (for example blurb links). Than you have to target the specific element, for example .page-id .blurb-id
Hi Victor! Tack saa mycket foer videon! I always learn a lot with your content for CSS beginners, always clear and effective. I have an urgent need though, I don't know how to create a cursor with CSS on Wordpress that shows multiple images scrolling one after the other at a 0,5 seconds rythm. I can either upload the images one by one and apply the correct CSS or upload a gif (the quality wouldn't be good in that case). Do you know which CSS rule I should use?
Hi Guilio, Sorry, but I can't help you with that but maybe there's a hint in here: devbeep.com/animated-cursor You could also try to find a developer at divimundo.com/en/fiverr that can help you. Best of luck! Ciao!
@@rswebmarketing Does the live demo at divimundo.com/en/blog/use-images-as-mouse-cursors/ work? If not, which device and browser do you use? I just tested it using Chrome, Firefox and Safari and it works fine in all three.
Does the live demo at divimundo.com/en/blog/use-images-as-mouse-cursors/ work? If not, which device and browser do you use? I just tested it using Chrome, Firefox and Safari and it works fine in all three.
wow! thank you ♥ for this excellent instruction to use an icon as a cursor. With your help we easily switched the boring standard to our awesome red pretzelhead and our golden heartiness heart.
I just checked out your website and it looks really cool. 😎 Now I'm hungry for pretzels!
@@Victor-Duse awesome! Thanks for your message! By the way: Perfect time to be hungry for pretzels - as it‘s international pretzel day today - 26.April 🙌🥨♥️ - of course for us it‘s always pretzel day. Our saying is: life is a circle, sometimes a square, a triangle, a heart - and always a pretzel!
is this work only with png image ?
or any ideal size ?
That video is amazing. My client requested for custom cursor and here it is.
How to add CSS code to have other image when I "click"?
Thank you!
Thanks! Try to replace:
:hover
with
:active
in the CSS. That till apply the new image cursor when the mouse button is held down. Let me know how it goes! 🙂
Thank you for sharing this information!
I have a question...what would be the code for the hover cursor of a specific page? I tried to reference the code for hover entire site along with specific page but attempting to compare and combine didn't give me a successful result.
To target a specific page, you could use this CSS:
.page-id-123 {
cursor: url('my-folder/my-cursor.png'), auto;
}
Just replace the page id for your specific page. Here's a guide on how to find the id for a specific page or post: www.elegantthemes.com/affiliates/idevaffiliate.php?id=40598&url=71886
@@Victor-Duse thank you for the quick reply! But, how do I do this for the h o v e r over link cursor 🤔
@@hostsofmichael Well, the mouse cursor hovers the page all the time but if you want it to change it when hovering a specific element on the page, you need to target that elements class. If you want to display your custom mouse cursor when it hovers LINKS only, you could try to target all elements with links (a) on the page:
.page-id-123 a {
cursor: url('my-folder/my-cursor.png'), auto;
}
@@Victor-Duse ahhh yes I meant to say hover over links 🤭 . I did try adding the "a" before but didn't succeed. I'll try again. Anyway, thank you for your time
@@hostsofmichael If an a link already has a CSS property, you might need to add !important to override it. Also, not all links are created with html (the a tag), some are injected with JavaScript (for example blurb links). Than you have to target the specific element, for example .page-id .blurb-id
Thanks so much!
You’re most welcome! 🙂
Hi Victor! Tack saa mycket foer videon! I always learn a lot with your content for CSS beginners, always clear and effective.
I have an urgent need though, I don't know how to create a cursor with CSS on Wordpress that shows multiple images scrolling one after the other at a 0,5 seconds rythm.
I can either upload the images one by one and apply the correct CSS or upload a gif (the quality wouldn't be good in that case).
Do you know which CSS rule I should use?
Hi Guilio,
Sorry, but I can't help you with that but maybe there's a hint in here: devbeep.com/animated-cursor
You could also try to find a developer at divimundo.com/en/fiverr that can help you. Best of luck!
Ciao!
is this not work with jpeg or webp images
It should work with both but it depends on browser compatibility. Have you made them exactly 32 x 32 px?
@@Victor-Duse its now worked sir in 64x 64 px
@@BiswajitSardar-r1j Awesome! Some browsers are very picky about the size.
I'm using elementor and it doesn't apply, what can I do?
That depends on what element you try to apply the mouse cursor on. Do you have a link with an example?
not working
Eh, sure it does. You must be doing something wrong.
not working too.
@@rswebmarketing Does the live demo at divimundo.com/en/blog/use-images-as-mouse-cursors/ work? If not, which device and browser do you use? I just tested it using Chrome, Firefox and Safari and it works fine in all three.
Does the live demo at divimundo.com/en/blog/use-images-as-mouse-cursors/ work? If not, which device and browser do you use? I just tested it using Chrome, Firefox and Safari and it works fine in all three.
Snippet and live demo is available at: divimundo.com/en/blog/use-images-as-mouse-cursors/