3

私は SVG フィギュアを持っており、ある要素内の別の要素に:hoverプロパティを適用したいと考えています。<rect>しかし、うまくいきません：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">

    <style type="text/css"><![CDATA[
        #rec1 {
            fill:black;   // outer element
        }
        #rec2 {
            fill:white;      // inner element
            display:none;   // and element not visible
        }
        #rec1:hover #rec2 {
            display:block;   // when hover outer lets inner become visible
                             // but it doesn't work
        }
        #rec1:hover  {
            fill:red;       // strange but this hover works
        }

    ]]></style>

        <g id="g">
            <rect id="rec1" x="0" y="0" width="200" height="50" />
            <rect id="rec2" x="100" y="20" width="20" height="20" />
        </g>

</svg>

このような場合にホバーを適用する正しい方法は何ですか?

UPD: 1 つの解決策が見つかりました。

まず、それ<rect>は別の要素ではありません。彼らは兄弟です。そして、そのような種類のスタイル#rec1:hover #rec2がネストされた要素でのみ適用される限り、ここでは機能しません。そこで、最も外側の<g>要素にスタイルを適用しました。

#g:hover #rec2 {
    display:block;   // it works just fine
}

しかし、この問題を解決する方法は他にありますか?

4

2 に答える 2

2

使用するだけです：

#rec1:hover + #rec2 {
     display: block;                 
}

セレクターは、+兄弟（gこの場合は同じ要素の子）を選択するために使用されます。これはここでのケースです。

お役に立てば幸いです。

于 2012-08-20T19:19:56.577 に答える
1

これらの長方形は、CSS に関する限りネストされていません。

このスタイル#rec1:hover #rec2は、#rec2 が #rec1 要素内にネストされ、#rec1 要素がホバーされている場合にのみ適用されます。

スタイルを次のように適用するだけです#rec2:hover

于 2012-08-20T19:08:05.853 に答える