신청 방법 : SVG 내부에서 <rect> 요소를 가리 키시겠습니까?

Question

SVG 그림이 있고 <rect> 요소를 다른 그림에 적용하려면 :hover 속성을 적용하고 싶습니다. 하지만 작동하지 않습니다.

<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 : 한 가지 해결책을 찾았습니다.

먼저 다른 하나의 요소에 <rect> 요소가 없습니다. 그들은 형제입니다. 그리고 그러한 종류의 스타일이 중첩 된 요소에만 적용 가능한 #rec1:hover #rec2을 적용 할 경우 여기서는 작동하지 않습니다. 그래서 대부분의 외부 <g> 요소에 스타일을 적용 :

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

그러나이 문제를 해결하기 위해 더 이상 방법이있다?

Answer 1

로 스타일을 적용 그냥 사용

+ 선택은 형제 자매 (같은 요소의 자식 -이 경우 g)을 선택하는 데 사용됩니다

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

경우이다, 이리.

희망이 도움이되었습니다!

Answer 2

해당 사각형은 CSS와 관련하여 중첩되지 않습니다.

이 스타일 #rec1:hover #rec2은 # rec1이 # rec1 요소 안에 중첩되어 있고 # rec1 요소가 내재되어있는 경우에만 적용됩니다.

그냥 #rec2:hover