Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Joe Bruno
Joe Bruno
35,909 Points

cursor: crosshair increase size?

Hey everyone,

Is there a way to increase the size of the crosshair when using the css property:

    cursor: crosshair;

I know I could define a customer cursor, which I may need to do, but I wondered if anyone knew of a method to increase the size of the "default" crosshairs cursor. I have looked at the documentation, but have not found anything helpful.

Thanks!

4 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I think this maybe what you need,

newcursor{
cursor: crosshair;
width: 100px;
height: 100px;
}

It's not a perfect fix, you'll have to add a class type of newcursor to the body or content, but I think it should do. Not perfect but its the best I can come up with for now. Let me know if it doesn't work and i'll look into it more.

Joe Bruno
Joe Bruno
35,909 Points
Joe Bruno
Joe Bruno
35,909 Points

Someone else mentioned something similar. I could not get it to work, so I just defined my own custom cursor - at least for now.

  #resume div:hover {
background: rgba( 255, 83, 75, 0.7); 
cursor: url(assets/icons/cursor.png), auto; 

 }
Wayne Priestley
Wayne Priestley
19,579 Points

I just added a note about adding a class to your body tag, don't know if i added it in time for you to see it before you wrote this reply.

Joe Bruno
Joe Bruno
35,909 Points

I probably will end up going with the custom cursor; however, I make sure I am not missing something.

HTML:

 <body class='container-fluid newcursor'>

CSS:

  newcursor {
        cursor: crosshair;
         width: 100px;
          height: 100px;
   }   

    #resume div:hover {
         background: rgba( 255, 83, 75, 0.7); 
         cursor: newcursor; 

   }

This should work, correct? I am following your instructions?

Thanks

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I think the custom cursor way maybe the cleanest and best route to go Joe.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Yes Joe, thats how i would of tried it.