如何应用：悬停在 SVG 内部 <rect> 元素上？答案

【问题标题】：How to apply :hover on SVG inner <rect> element?如何应用：悬停在 SVG 内部 <rect> 元素上？
【发布时间】：2012-08-16 03:04:38
【问题描述】：

我有一个 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
}

但是还有其他方法可以解决这个问题吗？

【问题讨论】：

标签： css svg hover

【解决方案1】：

只需使用：

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

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

希望有所帮助！

【讨论】：

【解决方案2】：

就 CSS 而言，这些矩形不是嵌套的。

这种样式#rec1:hover #rec2 仅适用于#rec2 嵌套在#rec1 元素中并且#rec1 元素被悬停时。

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

【讨论】：

我试过了，但也没有用。但是根据您的评论，我找到了一种解决方案。谢谢你。我只是忘记了这样的 css 只适用于嵌套元素。