View Full Version : Custom Cursor with CSS

May 21st, 2017, 07:44 PM

Looking at the bellow example if you hover on the blue box your mouse cursor will change and show an image. It works.
However if I comment out the line 7 and activate line 9 to show a larger image, it doesn’t work any more!!

Could you please tell me why?

CSS - Custom Cursor Example (http://codepen.io/itsthomas/pen/KmxjRg?editors=1100#0)


May 22nd, 2017, 06:40 PM
It could be the method by which you're commenting out the css.

Multiple lines use /* */ and it's likely you're last line isn't being read because of the one-line comment out's.

Try this:

.prada {
width: 400px;
height: 300px;
margin: 10px auto;
background: #B0D7FF;
/* image dimension: 120 x 60px
cursor: url(http://i65.tinypic.com/2j44ya9.png) 24 25, auto;

image dimension: 349 x 102px
This doesn't work as the maximum size should be 128 x 128px
cursor: url(http://i68.tinypic.com/6hnitf.png) 24 25, auto;

image dimension: 128 x 37px */
cursor: url(http://i67.tinypic.com/2v33q7k.png) 24 25, auto;

May 22nd, 2017, 07:17 PM
the answer to this problem may be found here...

custom cursor problem solution (https://www.sitepoint.com/community/t/custom-cursor/264113/2?u=coothead)