Question

我在这里创造了一个小提琴：http://jsfiddle.net/frgj2/

在其中，您将看到两个div，每个div包含另一个div。在一个中，外部有{ cursor: pointer; }，内部有{ cursor: wait; }。另一个div反过来了。

在Chrome中（至少还没有测试过其他人），显示的光标是内部div上的光标。

我找不到任何解释如何确定或者是否可以覆盖此行为的文档。任何人都可以对此有所了解吗？

如果有一个JavaScript解决方案，我会接受它。

更新

我在外部DIV中添加了一些文字。当鼠标悬停在它上面时，它会显示“正确”的光标。 http://jsfiddle.net/frgj2/2

Answer 1

我的猜测是，<div>位于“顶部”的那个将是浏览器将选择显示光标的那个（即浏览器将显示鼠标指针所在的任何元素的光标“on”或“结束”）。

如果你希望内部和外部div具有相同的光标而不单独设置它，那么你可以在外部div上设置一次光标，然后将cursor: inherit应用于内部div。

示例：

<style type="text/css">
    .foo { cursor: wait; }
    .foo * { cursor: inherit; }
    /* or if it really only needs to be the inner divs */
    . foo div { cursor: inherit; }
</style>

<div class="foo">
    <div class="bar">Message</div>
</div>

注意：cursor: inherit应适用于所有现代浏览器（Chrome 1.0 +，Firefox 1.0 +，Opera 9.0 +，Safari 1.2+和IE 8.0 +）。

Source 了解兼容性信息。

如果通过CSS设置多个游标，浏览器如何确定使用哪个游标？

更新

1 个答案: