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
Select All Block Level Elements with CSS
Angular 2 - Jquery | Adding Styles (Top/Left) with a Mouse Position
Horizontal Sharp Background Gradient with Specific Length of First Color
Repeat Dots in Less/Sass for Content Property
Why Doesn't Blur(0) Remove All Text Blur in Webkit/Chrome on Retina Screens
Improving Balance in Flexbox Lines
Use CSS to Make Background-Image Above Background-Color in a List
Style Dojox Grid Row Depending on Data
CSS Target Just Class Name Starts with and Ends with String
How to Create a Button (Or Div) with a Border That Has a Gradient and Has Rounded Corners
Media Query in Responsive Email Template