Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social-links-profile

Nrosta 530

@Nrotsa

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

Raza Abbas 790

@RazaAbbas62

Posted

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 helpful

1

Nrosta 530

@Nrotsa

Posted

@FazeenIjaz Thank you very much

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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