Cursor Image using CSS

Question

I would like to use an image that is 195 x 29 to replace the hand when someone hovers over a map image. I'm trying to do this css but would consider a javascript option if no css option is available. I've tried several different css options but can not get the results I'm looking for. Currently i have my css code setup as:

#docmap {float:left;width:620px;height:225px;} .click a:hover {cursor:url(images/click.png) no-repeat !important;}

and my html is:

<div id="docmap" class="click"><a href="http://goo.gl/maps/R3TXp" target="_blank"><img src="http://whistlerworks.com/clients/918smile/site/wp-content/themes/Karma/images/map.png" alt="" /></a></div>

Thanks for the help.

isherwood · Accepted Answer · 2013-02-27 15:06:25Z

2

.click a {cursor: url(images/click.png), pointer}

https://developer.mozilla.org/en-US/docs/CSS/cursor/url

answered Feb 27, 2013 at 15:06

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rosario · Accepted Answer · 2013-02-27 15:07:57Z

check this out, might help let me know if its useful

http://www.htmlgoodies.com/beyond/css/create-custom-cursors-with-javascript-and-css3.html#fbid=2P5qQIHDj3T

Matt Coughlin · Accepted Answer · 2013-02-27 16:12:24Z

The safest image format is a 32x32 8-bit black and white .ico file.

As @isherwood mentioned, the basic syntax is:

.click a { cursor: url(my-icon.ico), auto; }

I don't think JavaScript would help. Any browser support available would likely be via CSS alone. And you'd have to be willing to live with some browsers simply not supporting it (i.e., progressive enhancement).

Testing in different browsers

Here's a demo that uses a variety of image formats. Move the mouse over the squares to find out what works in each browser. In each case, if it works, you'll see a butterfly cursor.

Exceptions: The bottom row uses a completely-transparent image, so you should see no cursor at all. On the first two rows, in the "Help" column, you should see the default help icon (which is the fallback cursor for all of the other squares).

Collectives™ on Stack Overflow

Cursor Image using CSS

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related