/私はそれには2つの部分でSVGファイルを持っているSVG

Question

内の要素を隠すためにCSSを使用しました。私は、上にマウスを置くと、.segment_1のクラスで色を変更するためのホバー状態を作成しました（.segment_1上にカーソルを置くとその部分が機能します）。私は同じSVGファイルにCSSを使ってうまく隠れるようにした別の要素も持っています（#matter）。問題は、#matterという名前のdivをホバー状態でも表示できないように見えることです。色の変更は機能しますが、（＃matter）という名前のdivの表示状態は表示されません。これに関する助けを前にありがとう。

.segment_1 {fill:#a1a1a1;} 
 
.segment_1:hover {fill:#F9A92F;} 
 
    
 
#matter {display: none;} 
 
    
 
.segment_1:hover #matter {display:block;}

<svg version="1.1" id="rocket_x5F_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 
 
    \t y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve"> 
 
    <style type="text/css"> 
 
    \t .st0{fill:#E6E7E8;} 
 
    \t .st1{fill:#F9AA30;} 
 
    </style> 
 
    <g id="rocket"> 
 
    \t <path id="segment_x5F_1" class="st0 segment_1" d="M305.7,12.3c-14.8,21.5-24.6,47.6-34.8,71.1c10.3,23.8,20.3,43.2,35.3,65 
 
    \t \t c14.9-21.7,24.4-41.1,34.6-64.5C330.5,60.1,320.8,34,305.7,12.3"/> 
 
    </g> 
 
    <g id="matter"> 
 
    \t <path class="st1" d="M278.4,76.7h-139c-5.4,0-9.9-4.4-9.9-9.9V47.4c0-5.4,4.4-9.9,9.9-9.9h139c5.4,0,9.9,4.4,9.9,9.9v19.4 
 
    \t \t C288.2,72.2,283.8,76.7,278.4,76.7z"/> 
 
    </g> 
 
</svg>

Answer 1

問題は、あなたが正しい

.segment_1:hover #matter {display:block;} 

である私に与えているように見えるのコードの行。そのCSSルールは動作しません。 .segment_1 #matterは、 "問題"というIDを持つ ".segment_1"の子孫を意味します。しかし、 "＃マター"は子供ではありません。 ＃問題の親の兄弟です。

：

あなたは純粋なCSSで取得することができます最寄りの兄弟コンビネータ（「+」）ここでデモ

#rocket:hover + #matter {display:block;} 

を親（#rocket）にホバー擬似セレクタを適用し、使用しています

.segment_1 {fill:#a1a1a1;} 
 
.segment_1:hover {fill:#F9A92F;} 
 
    
 
#matter {display: none;} 
 
    
 
#rocket:hover + #matter {display:block;}

<svg version="1.1" id="rocket_x5F_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 
 
    \t y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve"> 
 
    <style type="text/css"> 
 
    \t .st0{fill:#E6E7E8;} 
 
    \t .st1{fill:#F9AA30;} 
 
    </style> 
 
    <g id="rocket"> 
 
    \t <path id="segment_x5F_1" class="st0 segment_1" d="M305.7,12.3c-14.8,21.5-24.6,47.6-34.8,71.1c10.3,23.8,20.3,43.2,35.3,65 
 
    \t \t c14.9-21.7,24.4-41.1,34.6-64.5C330.5,60.1,320.8,34,305.7,12.3"/> 
 
    </g> 
 
    <g id="matter"> 
 
    \t <path class="st1" d="M278.4,76.7h-139c-5.4,0-9.9-4.4-9.9-9.9V47.4c0-5.4,4.4-9.9,9.9-9.9h139c5.4,0,9.9,4.4,9.9,9.9v19.4 
 
    \t \t C288.2,72.2,283.8,76.7,278.4,76.7z"/> 
 
    </g> 
 
</svg>

これはあなたのサンプルのために動作しますが、あなたの本当のファイルに対して動作しない場合があります。これは、ロケットの子供の上にマウスを置くと#matter要素が表示されることを意味します。

あなたはおそらくロケット一部ようにSVGファイルをrearragingことにより、あなたが望むものを達成することができるようになりますし、それがポップアップだが兄弟です。

.segment_1 {fill:#a1a1a1;} 
 
.segment_1:hover {fill:#F9A92F;} 
 
    
 
.popup {display: none;} 
 
    
 
.segment:hover .popup {display:block;}

<svg version="1.1" id="rocket_x5F_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 
 
    \t y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve"> 
 
    <style type="text/css"> 
 
    \t .st0{fill:#E6E7E8;} 
 
    \t .st1{fill:#F9AA30;} 
 
    </style> 
 
    <g id="rocket"> 
 
     <g class="segment"> 
 
     \t <path id="segment_x5F_1" class="st0" d="M305.7,12.3c-14.8,21.5-24.6,47.6-34.8,71.1c10.3,23.8,20.3,43.2,35.3,65 
 
    \t \t c14.9-21.7,24.4-41.1,34.6-64.5C330.5,60.1,320.8,34,305.7,12.3"/> 
 
      \t <path class="st1 popup" d="M278.4,76.7h-139c-5.4,0-9.9-4.4-9.9-9.9V47.4c0-5.4,4.4-9.9,9.9-9.9h139c5.4,0,9.9,4.4,9.9,9.9v19.4 
 
    \t \t C288.2,72.2,283.8,76.7,278.4,76.7z"/> 
 
     </g> 
 
    </g> 
 
</svg>

あなたがそれを行うことができない場合は、JavaScriptに頼る必要があります。