Design comparison
SolutionDesign
Solution retrospective
Hi, this is my solution to this challenge.
Good challenge to practice the basics of css and html.
I have one question though, is it possible to make this cursor black when hovered over like in the design preview? I know it can be done with svg, but I'm wondering if it's possible in some simple way.
If you have any ideas what I can improve in the code or notice any errors, please let me know.
Feedback is welcome
Community feedback
- @RazaAbbas62Posted 10 months ago
There are two ways to achieve that behavior
/* Regular cursor color */ body { cursor: default; } /* Change cursor color on hover */ body:hover { cursor: url('path/to/black-cursor.png'), auto; }
Or if u don't have that black cursor image you can do like
/* Change cursor color on hover to solid black */ body:hover { cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAf0lEQVR42mP8/wc/AwAB/ABsAAdUoJ9QAAAABJRU5ErkJggg=='), auto; }
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord