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 oute.
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
.html
.85%29.aspx
.asp
Can anyone explain this behaviour or know a possible way around it?
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 oute.
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/TR/CSS2/ui.html
http://msdn.microsoft./en-us/library/aa358795%28v=vs.85%29.aspx
http://www.w3schools./cssref/pr_class_cursor.asp
https://developer.mozilla/en/CSS/cursor
Can anyone explain this behaviour or know a possible way around it?
Share Improve this question asked Jan 10, 2012 at 8:00 OlgaOlga 1,6901 gold badge22 silver badges34 bronze badges2 Answers
Reset to default 6Use 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.
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>