Question

我试图在悬停时更改Path＃Fill-1填充颜色。

 <svg version="1.1"  id="Layer_1" 
        <g id="UI-Kit" sketch:type="MSPage">
            <g id="Icons" transform="translate(-86.000000, -283.000000)" sketch:type="MSArtboardGroup">
                <g id="Fill-1-_x2B_-Fill-2-_x2B_-Fill-3" transform="translate(86.000000, 283.000000)" sketch:type="MSLayerGroup">
                    <path id="Fill-1" sketch:type="MSShapeGroup" fill="#FFA400" d="M22.166,0.184c-12.161,0-22.054,9.893-22.054,22.054
                        s9.893,22.054,22.054,22.054s22.055-9.894,22.055-22.054S34.327,0.184,22.166,0.184"/>

                    <path id="Fill-2" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M23.906,22.229c0-2.794,0.002-5.588-0.002-8.382
                        c-1.084-0.016-1.998-0.959-2.026-2.039c-0.003-0.133-0.005-0.266-0.005-0.398V22.229"/>
                </g>
            </g>
        </g>
        </svg>

这是我的CSS：

svg > path#Fill-1:hover {
    fill:red;
}

但悬停时没有任何反应。请检查JSfiddle http://jsfiddle.net/vww63s0s/

Answer 1

>意味着您将在svg中寻找直接的路径，但其间有几个g元素。删除>，它应该可以正常工作

Answer 2

您可以直接引用Fill-1，因为它是ID。

＆＃13;

#Fill-1:hover {
    fill:red;
}

＆＃13;

<svg version="1.1"  id="Layer_1" class="red">
        <g id="UI-Kit" sketch:type="MSPage">
            <g id="Icons" transform="translate(-86.000000, -283.000000)" sketch:type="MSArtboardGroup">
                <g id="Fill-1-_x2B_-Fill-2-_x2B_-Fill-3" transform="translate(86.000000, 283.000000)" sketch:type="MSLayerGroup">
                    <path id="Fill-1"sketch:type="MSShapeGroup" fill="#FFA400" d="M22.166,0.184c-12.161,0-22.054,9.893-22.054,22.054
                        s9.893,22.054,22.054,22.054s22.055-9.894,22.055-22.054S34.327,0.184,22.166,0.184"/>

                    <path id="Fill-2" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M23.906,22.229c0-2.794,0.002-5.588-0.002-8.382
                        c-1.084-0.016-1.998-0.959-2.026-2.039c-0.003-0.133-0.005-0.266-0.005-0.398V22.229"/>
                </g>
            </g>
        </g>
</svg>

＆＃13;

Answer 3

使用svg作为父级，然后在悬停时更改内部元素。下面的代码应该可以胜任。

 svg #Fill-1 { 
     fill:red;
 }
 svg:hover #Fill-1 {
     fill:black;
 }

更改SVG填写悬停

3 个答案: