Home/ Questions/Q 7037007
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:29:30+00:00

What I want is specify cursor:pointer for the whole body tag, so the background

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0