3

I have a custom cursor for an image map with a lot of hotspots. My cursor works fine in Firefox and Internet Explorer, but Safari returns the default one.

I used code found on other websites. My directory structure is:

index.php > css/main.css > css/images/pencil.cur

Here is my implementation (please note I need the same custom cursor for both normal and a, a:hover and a:visited states:

#gameScreen area, #gameScreen .wrapper, #gameScreen .wrapper a:hover, #gameScreen .wrapper a:visited {
    cursor: url("images/rcspencil.cur"),url("css/images/rcspencil.cur"),default;
}

Any ideas?

mauzilla
  • 3,574
  • 10
  • 50
  • 86

1 Answers1

1

Here's the most browser-compatible syntax I can think of. There might be a better one with browser hacks but I'd ignore it.

cursor: url(cursor.cur),url(cursor/cursor.cur),default;

I wouldn't think the quotations would prevent it from working, but try it without them. The only other thing I can think of is that your selectors are wrong, like the selectors you've got listed don't include the thing you're hovering over.

alt
  • 13,357
  • 19
  • 80
  • 120
  • I have changed the code to (to ensure I include each possible selector) but still the same issue on Safari. On Chrome the cursor works except for a hover state. This is frustrating!!!! #gameScreen area, #gameScreen .wrapper, #gameScreen .wrapper a:hover, #gameScreen img { cursor: url(cursor/cursor.cur),url(cursor.cur),default; } #gameImg, #gameImg area, #gameImg area a, #gameImg area a:hover, #gameImg a, #gameImg a:hover { cursor: url(cursor/cursor.cur),url(cursor.cur),default; } – mauzilla Nov 11 '11 at 08:52
  • 4
    I fixed it by just resizing the icon. It appears that webkit browsers needs icons to be less than 50px x 50px, I resized my 68x68px to 40x40px and it worked, with the CSS provided by Jackson Gariety – mauzilla Nov 11 '11 at 10:10
  • 1
    @MauritzSwanepoel I've found that Safari (5.1.7 on Snow Leopard 10.6.8) can handle a 64x64px custom URL cursor. Also (for me) having quotes doesn't break things, but equally, as for other CSS images, you don't actually need them. – William Turrell Aug 02 '12 at 13:54