3

CSS3 を介して作成された形状との相互作用に関して、潜在的にトリッキーな質問があります。次のフィドルを参照してください: http://jsfiddle.net/MH4LN/1/

コード例:

<div class="container">
    <div class="l1"></div>
    <div class="l2"></div>
    <div class="l3"></div>
</div>

次の CSS を使用します。

.container {
    width: 570px; height: 570px;
    position: relative;
}
.l1 {
    width: 352px;
    height: 352px;
    background: red;

    position: absolute;
    top: 109px;
    left: 109px;
    z-index: 999;

    -webkit-border-radius: 176px;
    border-radius: 176px;
}
.l2 {
    width: 464px;
    height: 464px;
    background: blue;

    position: absolute;
    top: 53px;
    left: 53px;
    z-index: 998;

    -webkit-border-radius: 232px;
    border-radius: 232px;
}
.l3 {
    width: 570px;
    height: 570px;
    background: green;

    position: absolute;
    z-index: 997;

    -webkit-border-radius: 285px;
    border-radius: 285px;
}

.l1:hover, .l2:hover, .l3:hover {
    background: #fff;   
}

私の問題はこれです: ホバー時に各図形に CSS を適用したいです。シェイプは、境界線の半径を div の幅/高さの半分に設定する (円を作成する) ことによって作成されます。ただし、半径によって隠されている空の領域にカーソルを合わせると、その要素でホバー状態がトリガーされます。ここに私が何を意味するかを説明するための画像があります:

悲しいホバーは私を悲しくさせます。

これを回避する方法はありますか？これには、単純な丸みを帯びた div の代わりに canvas 要素を使用する必要がありますか?

編集: Firefox で正常に動作するため、これは WebKit ブラウザーに固有のようです。

編集 2: Niels の解決策は正しいので受け入れます。ボックス モデルでは、要素は長方形であると規定されているため、これについて行っていた方法は間違っていました。しかし、SVG で必要なことは達成できました。誰かが興味を持っている場合に備えて、Fiddle の例を次に示します: http://jsfiddle.net/uhrHX/1/

4

1 に答える 1

4

CSS 標準では、レベル 2 または 3 でこの動作を定義していません。定義されているのは次のとおりです。

:hover 疑似クラスは、ユーザーがポインティング デバイスで要素を指定している間に適用されますが、必ずしもそれをアクティブにするわけではありません。たとえば、ビジュアル ユーザー エージェントは、カーソル (マウス ポインター) が要素によって生成されたボックスの上に置かれたときに、この疑似クラスを適用できます。

CSS ボックス モデルは、すべてのブロック要素が長方形のボックスを形成することを暗黙的に示しています。テキストが div の周りに円形に浮かんでいないのと同じように、すべての意図と目的のために、円は依然として長方形のレイアウトであり、動作は Webkit に対してです。Gecko の開発者は、ホバーの境界半径を尊重するために余分な努力をしたようですが、背景などの「ギャップ」に対してはそれを行わないため、実際には一貫性がありません。 .

つまり、CSS 標準では動作が定義されていないため、ブラウザーの動作が変更されるとは思わないでください。クロスオールブラウザを適切に実装する唯一の方法は、Javascript と、マウス位置に関するいくつかのスマートなピタゴラス計算を使用することです。

于 2013-04-12T20:23:03.660 に答える