Safari custom cursor not working


Safari custom cursor not working



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?




1 Answer
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.





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 8:52





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





@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 2 '12 at 13:54






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

PHP contact form sending but not receiving emails

Do graphics cards have individual ID by which single devices can be distinguished?

iOS Top Alignment constraint based on screen (superview) height