Menu
What I want is specify cursor:pointer for the whole body tag, so the background of the page is clickable, but I also want the remainder of the page to work as it did, so I try setting cursor:auto for div, which contains the page.
In FF, Chrome and safari it works fine, also in IE 6 and 7. But it seems that IE 8 and 9 and also (screw it) OPERA have their own opinion on what cursor:auto means.
Here is a snippet to see what happens:
<!DOCTYPE html>
<html>
<head>
<title>Cursor test</title>
</head>
<body>
<div id="newBody" style="width:400px; height:300px; cursor:pointer; background:#ffddee; border:2px solid #ddaa66;">
<div id="pageContent" style="width:200px; cursor:auto; background:#fff;">
<p>This is a paragraph <a href="">click here</a>.</p>
</div>
</div>
</body>
</html>
Although this is an HTML snippet everything is done with javascript with the same outcome.
The standard says something really vague: The UA determines the cursor to display based on the current context. , also these pages didn't help on the issue
http://www.w3.org/TR/CSS2/ui.html
http://msdn.microsoft.com/en-us/library/aa358795%28v=vs.85%29.aspx
http://www.w3schools.com/cssref/pr_class_cursor.asp
https://developer.mozilla.org/en/CSS/cursor
Can anyone explain this behaviour or know a possible way around it?
531
Use CSS:
#pageContent {cursor:default}
#pageContent * {cursor:auto}
The cursor still ends up always being 'default' in IE, but at least other browsers display the expected behaviour.
76
I think auto is inheriting the parent style (not sure), I tried cursor:default; and It worked fine in IE 8 and FF 3.6.
<div id="newBody" style="width:400px; height:300px; cursor:pointer; background:#ffddee; border:2px solid #ddaa66;">
<div id="pageContent" style="width:200px; cursor:default; background:#fff;">
<p>This is a paragraph <a href="">click here</a>.</p>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
