如何应用 ：悬停在 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

只需使用：

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

+选择器用于选择兄弟（同一元素的子元素——在本例中为g），这里就是这种情况。

希望有帮助！

Answer 2

就CSS而言，这些矩形并没有嵌套。

只有当#rec2嵌套在#rec1元素中并且#rec1被悬停时，才会应用此样式#rec1:hover #rec2。

只需将样式应用为#rec2:hover