1

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

在其中，您会看到两个 div，每个 div 都包含另一个 div。一种是外有{ cursor: pointer; }，内有{ cursor: wait; }。另一个 div 则相反。

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

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

如果有对此的 JavaScript 解决方案，我会对此持开放态度。

更新

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

4

1 回答 1

4

我的猜测是，无论哪个<div>“在顶部”，浏览器都将选择显示光标（即浏览器将显示鼠标指针“打开”或“上方”的任何元素的光标）。

如果您希望内部和外部 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+）。

兼容性信息的来源。

于 2012-10-01T17:42:26.767 回答