3

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

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

4

2 回答 2

2

只需使用：

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

The + selector is used for selecting siblings (children of the same element -- g in this case), which is the case here.

Hope that helped!

于 2012-08-20T19:19:56.577 回答
1

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

#rec1:hover #rec2仅当 #rec2 嵌套在 #rec1 元素内并且 #rec1 元素被悬停时，此样式才适用。

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

于 2012-08-20T19:08:05.853 回答