使用CSS顯示/隱藏SVG中的元素

Question

我有一個包含兩部分的SVG文件。當我將鼠標懸停在片段上時，我設法創建懸停狀態以改變片段的顏色。（懸停在.segment_1上可以更改顏色，該部分可以工作）。我也在使用CSS成功隱藏的同一個SVG文件中有另一個元素（#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」的後代。但是「#matter」不是一個孩子。它是＃事的父母的兄弟姐妹。

你可以用純CSS獲得最近的是應用懸停僞選擇到父（#rocket），並使用兄弟組合子（「+」）

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

這裏演示了：

.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文件來實現你想要的，以便火箭部分和彈出窗口是兄弟。

.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。