1

ここでフィドルを作成しました：http://jsfiddle.net/frgj2/

その中に、2 つの 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 に答える