CSS Cursors Are Not Working in Webkit Browsers

CSS Cursors are not working in WebKit browsers

The problem seemed to lay in the fact that I had specified 3 levels of cursors i.e. The Custom one, the Crosshair and the Default cursor. There was no need to have the default one in there anyway as Crosshair is accepted by all browsers. Removing this seemed to make it work.

This seems strange though, does CSS only allow for two levels of cursors? If so then why did Opera and IE accept it, do they just ignore the first one?

Fixed CSS

    .olControlDrawFeatureActive 
{
cursor:url(<DOMAIN>/common/images/cursors/draw.png),crosshair;
}

Mouse cursor not changing if a pointer is not moved in Webkit-based browsers

This is a well known bug in then webkit engine, and there is no real workaround for it.

CSS cursor property not working in Chrome and Firefox

Try these,

CSS

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

Detail http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/

JQUERY (If you want)

// custom cursor
$(".portfolio-images img").css('cursor', function() {
if (jQuery.browser.mozilla) {
return 'url(image/cursor.cur), -moz-zoom-in';
}
else if (jQuery.browser.webkit) {
return 'url(image/cursor.cur), -webkit-zoom-in';
}
else {
return 'pointer';
}
});

DEMO http://yeyenedesignstudio.com/logo_design

Cursor Pointer doesn't work in Web-Kit Browsers

Adding this always did it for me

input[type="file"]::-webkit-file-upload-button {
cursor: pointer;
}

Why is cursor:pointer effect in CSS not working

You need to change the z-index so that #firstdiv is considered on top of the other divs.

The cursor:pointer property doesn't apply to file upload buttons in Webkit browsers

For starters, it works in Chrome if you remove the height declaration from the input rule.

Live demo: http://jsfiddle.net/mnjKX/16/

But this transparent input field is a hell of a hack... I wouldn't rely on it.


Update:

And here is the proper solution:

::-webkit-file-upload-button { cursor:pointer; }

I thought the file upload button is unreachable, but Chrome's user agent style sheet proved my wrong :)

CSS custom cursor doesn't work in FF/Chrome

The problem is not just with your css code lacking second argument but with the image file.

If you simply resize, make it smaller (i tried 32px for testing purposes) it works like a charm.

You might also want "pointer" rather than auto, judging by the look of the image;

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;

EDIT:
i realize now you wanted to keep the size but it just won't work. see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property for more info

Why does Chrome require the -webkit- prefix for CSS cursors?

The grab value is new to css-ui-3. This was during a time when anything that was new and experimental came in the form of vendor prefixes, including values. I'm not sure why Chrome hasn't still unprefixed it yet considering Firefox 27, released two and a half years ago, now supports this value unprefixed. Microsoft Edge also supports it unprefixed, though Internet Explorer does not.

Safari custom cursor not working

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.



Related Topics



Leave a reply



Submit