Question

我有一个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：找到一个解决方案。

首先，它不是另一个<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而言，这些矩形不是嵌套的。

此样式#rec1:hover #rec2仅适用于＃rec2嵌套在＃rec1元素内且＃rec1元素悬停的情况。

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

即可

如何申请：将鼠标悬停在SVG内部<rect>元素上？</rect>

2 个答案: