文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在svg边框内创建svg悬停效果

问如何在svg边框内创建svg悬停效果
EN

Stack Overflow用户
提问于 2021-09-23 17:16:18
回答 2查看 114关注 0票数 0

我目前在illustrator中创建了一个边框，并使用illustrator导入了一个也是SVG的图表，放在SVG边框内。因此，我想从我创建的图表中实际创建悬停效果。当我只有svg图的时候，我设法让悬停效果起作用，但是因为我给它添加了边框，悬停效果不起作用。我知道边界阻碍了这种效果。我想在css中实现这一点。下面是我没有添加边框时工作的css代码。下面是带有边框和图表的html代码，我使用下面的html将SVG代码放入其中。

这个小片段是我想要的悬停效果的地方:所以，我把它放在这里，因为它有很多html代码要看。但是，你会看到它在中间。

代码语言：javascript
复制
<a class="scaling-svg-color" href="#">
              <path d="M159.5,95.42a6,6,0,0,1,6-6H300.16a6,6,0,0,1,6,6V230.09a6,6,0,0,1-6,6H165.5a6,6,0,0,1-6-6Z"
              style="fill:#fff;stroke:#5e5e5e" />
</a>

-html代码

代码语言：javascript
复制
<div id="wrapperSVG_Agile" class="scaling-svg-container y">
    <svg class="svgTreeAgile" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 459.73 295.39">
        <polygon points="0 0 0 39.66 459.73 38.8 459.36 0.18 0 0" style="fill:#00269a" />
        <polyline points="459.73 36.68 0.22 39.34 0 282.87 459.58 283.42" style="fill:#c5cfe8" />
        <g id="Big_Text_Top" data-name="Big Text Top">
            <path
                d="M40.8,14........."
                style="fill:#fff" />
        </g>
        <rect id="bottom_border" data-name="bottom border" y="283.42" width="459.47" height="11.97"
            style="fill:#00269a" />
        <g id="Decision_Tree" data-name="Decision Tree">
            <rect x="3.15" y="4.09" width="35.8" height="30.32" style="fill:#00269a" />
            <polygon points="8.92 17.28 7.78 16.12 12.91 11.85 14.05 13.01 8.92 17.28" style="fill:#fff" />
            <polygon points="16.88 23.15 15.74 21.98 20.87 17.71 22.01 18.87 16.88 23.15" style="fill:#fff" />
            <polygon points="24.7 16.95 23.56 15.78 28.69 11.51 29.83 12.67 24.7 16.95" style="fill:#fff" />
            <polygon points="13.85 21.92 12.74 23.11 7.49 18.97 8.59 17.78 13.85 21.92" style="fill:#fff" />
            <polygon points="21.94 28.06 20.83 29.25 15.58 25.11 16.68 23.91 21.94 28.06" style="fill:#fff" />
            <polygon points="29.87 22.02 28.77 23.21 23.51 19.07 24.62 17.88 29.87 22.02" style="fill:#fff" />
            <ellipse cx="14.8" cy="11.2" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="6.87" cy="17.48" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="22.75" cy="17.48" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="14.8" cy="23.56" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="22.75" cy="29.75" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="30.68" cy="23.56" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="30.68" cy="11.2" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="14.81" cy="11.35" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="6.87" cy="17.43" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="22.75" cy="17.43" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="14.81" cy="23.56" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="22.75" cy="29.86" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="30.68" cy="23.56" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="30.68" cy="11.35" rx="1.47" ry="1.35" style="fill:#00269a" />
        </g>
        <g id="Text_on_Tree" data-name="Text on Tree">
            <path d="M103.43,162.76a45.3,45.3,0,1,1-45.3-45.3A45.3,45.3,0,0,1,103.43,162.76Z"
                style="fill:#fff;stroke:#5e5e5e" />
            <g id="a">
                <path id="d" d="M36.51,155.24V160h7.84v2.47H36.51v5.62H33.3V152.77H44.59v2.47H36.51"
                    style="fill:#333" />
                <path id="e"
                    d="M53.54,166c-1,1.17-1.85,2.41-3.95,2.35-2.28-.06-3.58-1.24-3.58-3.58-.06-3.71,3.4-3.89,7.16-3.77.07-1.6-.18-2.9-1.73-2.9a1.6,1.6,0,0,0-1.72,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.06,5.06c-.06.87.74,1.12,1.54.93V168C56,168.45,53.42,168.27,53.54,166Zm-3,.19c1.79,0,2.66-1.48,2.59-3.52-2,0-4.07-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="e-2" data-name="e"
                    d="M65.89,166c-1,1.17-1.85,2.41-4,2.35-2.29-.06-3.58-1.24-3.58-3.58-.06-3.71,3.39-3.89,7.16-3.77.06-1.6-.19-2.9-1.73-2.9a1.61,1.61,0,0,0-1.73,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.07,5.06c-.07.87.74,1.12,1.54.93V168C68.3,168.45,65.77,168.27,65.89,166Zm-3,.19c1.79,0,2.65-1.48,2.59-3.52-2,0-4.08-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="f"
                    d="M80.46,156.85c-.06-2.66-5.81-2.84-6-.19,1.11,4.08,9.32.62,9.51,7,.18,5.86-10.19,5.74-12.6,2.22a4.56,4.56,0,0,1-.74-1.85l3.09-.5c.18,2.84,6.91,3.46,7.16.31-1-4.26-9.26-.61-9.51-7-.24-5.37,9.45-5.44,11.61-2.16a5.34,5.34,0,0,1,.62,1.72"
                    style="fill:#333" />
            </g>
            <a class="scaling-svg-color" href="#">
            <path d="M159.5,95.42a6,6,0,0,1,6-6H300.16a6,6,0,0,1,6,6V230.09a6,6,0,0,1-6,6H165.5a6,6,0,0,1-6-6Z"
                style="fill:#fff;stroke:#5e5e5e" /></a>
            <path d="M104.43,162.76h38.18" style="fill:none;stroke:#5e5e5e" />
            <path d="M104.45,163.26h-.54l0-.5v-.5h.52Z" style="fill:#5e5e5e" />
            <path d="M157.38,162.76l-14.27,4.64v-9.27Z" style="fill:#5e5e5e;stroke:#5e5e5e" />
            <path d="M443.43,162.76a45.3,45.3,0,1,1-45.3-45.3A45.3,45.3,0,0,1,443.43,162.76Z"
                style="fill:#fff;stroke:#5e5e5e" />
            <g id="a-2" data-name="a">
                <path id="d-2" data-name="d" d="M376.51,155.24V160h7.84v2.47h-7.84v5.62H373.3V152.77h11.29v2.47h-8.08"
                    style="fill:#333" />
                <path id="e-3" data-name="e"
                    d="M393.54,166c-1,1.17-1.85,2.41-4,2.35-2.28-.06-3.58-1.24-3.58-3.58-.06-3.71,3.4-3.89,7.16-3.77.07-1.6-.18-2.9-1.73-2.9a1.6,1.6,0,0,0-1.72,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.06,5.06c-.06.87.74,1.12,1.54.93V168C396,168.45,393.42,168.27,393.54,166Zm-3,.19c1.79,0,2.66-1.48,2.59-3.52-2,0-4.07-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="e-4" data-name="e"
                    d="M405.89,166c-1,1.17-1.85,2.41-3.95,2.35-2.29-.06-3.58-1.24-3.58-3.58-.06-3.71,3.39-3.89,7.16-3.77.06-1.6-.19-2.9-1.73-2.9a1.61,1.61,0,0,0-1.73,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.07,5.06c-.07.87.74,1.12,1.54.93V168C408.3,168.45,405.77,168.27,405.89,166Zm-3,.19c1.79,0,2.65-1.48,2.59-3.52-2,0-4.08-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="f-2" data-name="f"
                    d="M420.46,156.85c-.06-2.66-5.81-2.84-6-.19,1.11,4.08,9.32.62,9.51,7,.18,5.86-10.19,5.74-12.6,2.22a4.56,4.56,0,0,1-.74-1.85l3.09-.5c.18,2.84,6.91,3.46,7.16.31-1.05-4.26-9.26-.61-9.51-7-.24-5.37,9.45-5.44,11.61-2.16a5.34,5.34,0,0,1,.62,1.72"
                    style="fill:#333" />
            </g>
            <path d="M307.16,162.76H336" style="fill:none;stroke:#5e5e5e" />
            <path d="M307.18,163.26h-.52v-1h.52Z" style="fill:#5e5e5e" />
            <path d="M350.71,162.76l-14.26,4.64v-9.27Z" style="fill:#5e5e5e;stroke:#5e5e5e" />
            <path d="M175.13,197.85a6,6,0,0,1,6-6h103.4a6,6,0,0,1,6,6v17.28a6,6,0,0,1-6,6H181.13a6,6,0,0,1-6-6Z"
                style="fill:#fff;stroke:#5e5e5e" />
            <g id="b">
                <path id="g"
                    d="M218.75,209.82c.61,5.43-7.72,6.72-9.88,2.65a5.83,5.83,0,0,1-.68-2l3.21-.49c.25,1.3.74,2.29,2.16,2.35s2-1,2-2.47v-8h-3v-2.53h6.24v10.5"
                    style="fill:#333" />
                <path id="h" d="M221.71,214.63V199.32h3.21v15.31h-3.21" style="fill:#333" />
                <path id="i"
                    d="M241.22,203.89a4.19,4.19,0,0,1-3.34,4.32l4.14,6.42h-3.64l-3.52-5.8h-3.77v5.8h-3.21V199.32C233.62,199.57,241.28,197.9,241.22,203.89Zm-10.13,2.47c3-.12,6.92.74,6.92-2.35s-4.08-2-6.92-2.16v4.51"
                    style="fill:#333" />
                <path id="j"
                    d="M254.67,214.63l-1.35-3.89h-5.81l-1.36,3.89h-3.21l5.56-15.31h3.77l5.55,15.31Zm-2-6.3-2.23-6.66c-.61,2.34-1.48,4.44-2.22,6.66h4.45"
                    style="fill:#333" />
            </g>
            <path d="M192.83,101.29H273.3v80.47H192.83Z" style="fill:none;stroke:#000;stroke-opacity:0" />
            <rect x="189.64" y="96.24" width="89.82" height="89.82" rx="44.73"
                style="stroke:#000;stroke-miterlimit:10" />
            <polygon points="235.05 111.44 201.53 141.07 235.62 170.86 270.02 141.15 235.05 111.44"
                style="fill:#fdfeff" />
            <polygon points="223.11 140.44 234.55 150.31 246.35 140.44 234.73 131.4 223.11 140.44" />
        </g>
    </svg>
</div>

-用于悬停效果的css代码

代码语言：javascript
复制
a.scaling-svg-color:hover path {
    fill: #d6b1d0;
    border: 1px solid #94a0b4;
}
html
css
svg
hover
adobe-illustrator
EN

回答 2

Stack Overflow用户

发布于 2021-09-23 20:31:21

由于以下几个原因，您的悬停规则不起作用：

元素的属性中的

  1. 规则会覆盖应用于该元素的style规则。因此style="fill:#fff;stroke:#5e5e5e"不会被a.scaling-svg-color:hover path { fill: #d6b1d0; }规则覆盖。

  1. border不起作用，因为它不是SVG元素的有效样式属性。也许你指的是stroke？

要强制CSS规则优先，您有几个选择。一种方法是添加!important标志，就像我在下面的示例中所做的那样。但是，作为一般建议，不鼓励使用此标志。因为它会扰乱继承。

或者，每当您从Illustrator导出您想要嵌入到网页上并使用CSS设置样式的SVG时，我的建议是确保更改导出选项"CSS属性“。将其设置为而不是 generate style attributes，就像这个SVG所具有的那样。如果您没有使用style=""属性，那么您的CSS规则就会起作用。

​

代码语言：javascript
复制
a.scaling-svg-color:hover path {
    fill: #d6b1d0 !important;
}
代码语言：javascript
复制
<div id="wrapperSVG_Agile" class="scaling-svg-container y">
    <svg class="svgTreeAgile" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 459.73 295.39">
        <polygon points="0 0 0 39.66 459.73 38.8 459.36 0.18 0 0" style="fill:#00269a" />
        <polyline points="459.73 36.68 0.22 39.34 0 282.87 459.58 283.42" style="fill:#c5cfe8" />
        <g id="Big_Text_Top" data-name="Big Text Top">
            <path
                d="M40.8,14........."
                style="fill:#fff" />
        </g>
        <rect id="bottom_border" data-name="bottom border" y="283.42" width="459.47" height="11.97"
            style="fill:#00269a" />
        <g id="Decision_Tree" data-name="Decision Tree">
            <rect x="3.15" y="4.09" width="35.8" height="30.32" style="fill:#00269a" />
            <polygon points="8.92 17.28 7.78 16.12 12.91 11.85 14.05 13.01 8.92 17.28" style="fill:#fff" />
            <polygon points="16.88 23.15 15.74 21.98 20.87 17.71 22.01 18.87 16.88 23.15" style="fill:#fff" />
            <polygon points="24.7 16.95 23.56 15.78 28.69 11.51 29.83 12.67 24.7 16.95" style="fill:#fff" />
            <polygon points="13.85 21.92 12.74 23.11 7.49 18.97 8.59 17.78 13.85 21.92" style="fill:#fff" />
            <polygon points="21.94 28.06 20.83 29.25 15.58 25.11 16.68 23.91 21.94 28.06" style="fill:#fff" />
            <polygon points="29.87 22.02 28.77 23.21 23.51 19.07 24.62 17.88 29.87 22.02" style="fill:#fff" />
            <ellipse cx="14.8" cy="11.2" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="6.87" cy="17.48" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="22.75" cy="17.48" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="14.8" cy="23.56" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="22.75" cy="29.75" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="30.68" cy="23.56" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="30.68" cy="11.2" rx="2.91" ry="2.68" style="fill:#fff" />
            <ellipse cx="14.81" cy="11.35" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="6.87" cy="17.43" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="22.75" cy="17.43" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="14.81" cy="23.56" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="22.75" cy="29.86" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="30.68" cy="23.56" rx="1.47" ry="1.35" style="fill:#00269a" />
            <ellipse cx="30.68" cy="11.35" rx="1.47" ry="1.35" style="fill:#00269a" />
        </g>
        <g id="Text_on_Tree" data-name="Text on Tree">
            <path d="M103.43,162.76a45.3,45.3,0,1,1-45.3-45.3A45.3,45.3,0,0,1,103.43,162.76Z"
                style="fill:#fff;stroke:#5e5e5e" />
            <g id="a">
                <path id="d" d="M36.51,155.24V160h7.84v2.47H36.51v5.62H33.3V152.77H44.59v2.47H36.51"
                    style="fill:#333" />
                <path id="e"
                    d="M53.54,166c-1,1.17-1.85,2.41-3.95,2.35-2.28-.06-3.58-1.24-3.58-3.58-.06-3.71,3.4-3.89,7.16-3.77.07-1.6-.18-2.9-1.73-2.9a1.6,1.6,0,0,0-1.72,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.06,5.06c-.06.87.74,1.12,1.54.93V168C56,168.45,53.42,168.27,53.54,166Zm-3,.19c1.79,0,2.66-1.48,2.59-3.52-2,0-4.07-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="e-2" data-name="e"
                    d="M65.89,166c-1,1.17-1.85,2.41-4,2.35-2.29-.06-3.58-1.24-3.58-3.58-.06-3.71,3.39-3.89,7.16-3.77.06-1.6-.19-2.9-1.73-2.9a1.61,1.61,0,0,0-1.73,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.07,5.06c-.07.87.74,1.12,1.54.93V168C68.3,168.45,65.77,168.27,65.89,166Zm-3,.19c1.79,0,2.65-1.48,2.59-3.52-2,0-4.08-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="f"
                    d="M80.46,156.85c-.06-2.66-5.81-2.84-6-.19,1.11,4.08,9.32.62,9.51,7,.18,5.86-10.19,5.74-12.6,2.22a4.56,4.56,0,0,1-.74-1.85l3.09-.5c.18,2.84,6.91,3.46,7.16.31-1-4.26-9.26-.61-9.51-7-.24-5.37,9.45-5.44,11.61-2.16a5.34,5.34,0,0,1,.62,1.72"
                    style="fill:#333" />
            </g>

            <a class="scaling-svg-color" href="#">
            <path d="M159.5,95.42a6,6,0,0,1,6-6H300.16a6,6,0,0,1,6,6V230.09a6,6,0,0,1-6,6H165.5a6,6,0,0,1-6-6Z"
                style="fill:#fff;stroke:#5e5e5e" /></a>

            <path d="M104.43,162.76h38.18" style="fill:none;stroke:#5e5e5e" />
            <path d="M104.45,163.26h-.54l0-.5v-.5h.52Z" style="fill:#5e5e5e" />
            <path d="M157.38,162.76l-14.27,4.64v-9.27Z" style="fill:#5e5e5e;stroke:#5e5e5e" />
            <path d="M443.43,162.76a45.3,45.3,0,1,1-45.3-45.3A45.3,45.3,0,0,1,443.43,162.76Z"
                style="fill:#fff;stroke:#5e5e5e" />
            <g id="a-2" data-name="a">
                <path id="d-2" data-name="d" d="M376.51,155.24V160h7.84v2.47h-7.84v5.62H373.3V152.77h11.29v2.47h-8.08"
                    style="fill:#333" />
                <path id="e-3" data-name="e"
                    d="M393.54,166c-1,1.17-1.85,2.41-4,2.35-2.28-.06-3.58-1.24-3.58-3.58-.06-3.71,3.4-3.89,7.16-3.77.07-1.6-.18-2.9-1.73-2.9a1.6,1.6,0,0,0-1.72,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.06,5.06c-.06.87.74,1.12,1.54.93V168C396,168.45,393.42,168.27,393.54,166Zm-3,.19c1.79,0,2.66-1.48,2.59-3.52-2,0-4.07-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="e-4" data-name="e"
                    d="M405.89,166c-1,1.17-1.85,2.41-3.95,2.35-2.29-.06-3.58-1.24-3.58-3.58-.06-3.71,3.39-3.89,7.16-3.77.06-1.6-.19-2.9-1.73-2.9a1.61,1.61,0,0,0-1.73,1.67l-3.21-.13c.43-2.34,2.22-3.58,5.06-3.51s4.57,1.35,4.63,4.19l.07,5.06c-.07.87.74,1.12,1.54.93V168C408.3,168.45,405.77,168.27,405.89,166Zm-3,.19c1.79,0,2.65-1.48,2.59-3.52-2,0-4.08-.19-4,1.85,0,1.05.49,1.67,1.42,1.67"
                    style="fill:#333" />
                <path id="f-2" data-name="f"
                    d="M420.46,156.85c-.06-2.66-5.81-2.84-6-.19,1.11,4.08,9.32.62,9.51,7,.18,5.86-10.19,5.74-12.6,2.22a4.56,4.56,0,0,1-.74-1.85l3.09-.5c.18,2.84,6.91,3.46,7.16.31-1.05-4.26-9.26-.61-9.51-7-.24-5.37,9.45-5.44,11.61-2.16a5.34,5.34,0,0,1,.62,1.72"
                    style="fill:#333" />
            </g>
            <path d="M307.16,162.76H336" style="fill:none;stroke:#5e5e5e" />
            <path d="M307.18,163.26h-.52v-1h.52Z" style="fill:#5e5e5e" />
            <path d="M350.71,162.76l-14.26,4.64v-9.27Z" style="fill:#5e5e5e;stroke:#5e5e5e" />
            <path d="M175.13,197.85a6,6,0,0,1,6-6h103.4a6,6,0,0,1,6,6v17.28a6,6,0,0,1-6,6H181.13a6,6,0,0,1-6-6Z"
                style="fill:#fff;stroke:#5e5e5e" />
            <g id="b">
                <path id="g"
                    d="M218.75,209.82c.61,5.43-7.72,6.72-9.88,2.65a5.83,5.83,0,0,1-.68-2l3.21-.49c.25,1.3.74,2.29,2.16,2.35s2-1,2-2.47v-8h-3v-2.53h6.24v10.5"
                    style="fill:#333" />
                <path id="h" d="M221.71,214.63V199.32h3.21v15.31h-3.21" style="fill:#333" />
                <path id="i"
                    d="M241.22,203.89a4.19,4.19,0,0,1-3.34,4.32l4.14,6.42h-3.64l-3.52-5.8h-3.77v5.8h-3.21V199.32C233.62,199.57,241.28,197.9,241.22,203.89Zm-10.13,2.47c3-.12,6.92.74,6.92-2.35s-4.08-2-6.92-2.16v4.51"
                    style="fill:#333" />
                <path id="j"
                    d="M254.67,214.63l-1.35-3.89h-5.81l-1.36,3.89h-3.21l5.56-15.31h3.77l5.55,15.31Zm-2-6.3-2.23-6.66c-.61,2.34-1.48,4.44-2.22,6.66h4.45"
                    style="fill:#333" />
            </g>
            <path d="M192.83,101.29H273.3v80.47H192.83Z" style="fill:none;stroke:#000;stroke-opacity:0" />
            <rect x="189.64" y="96.24" width="89.82" height="89.82" rx="44.73"
                style="stroke:#000;stroke-miterlimit:10" />
            <polygon points="235.05 111.44 201.53 141.07 235.62 170.86 270.02 141.15 235.05 111.44"
                style="fill:#fdfeff" />
            <polygon points="223.11 140.44 234.55 150.31 246.35 140.44 234.73 131.4 223.11 140.44" />
        </g>
    </svg>
</div>

​

票数 2
EN

Stack Overflow用户

发布于 2021-09-23 17:30:43

当使用svgs做悬停效果时，我的方法是有两个图像，一个有悬停效果，另一个没有。在悬停时，交换图像。

查看文件：

代码语言：javascript
复制
<div class="column small-12 download-link">
  <img data-src="url-regular" class="package-download-icon">
  <img data-src="url-hover" class="package-download-icon-hover">
</div>

SCSS文件：

代码语言：javascript
复制
.package-download-icon, .package-download-icon-hover {
    float: left;
    vertical-align: top;
    margin-top: 2px;
    margin-right: 8px;
    margin-bottom: 12px;
}
.package-download-icon-hover {
    display: none;
  }
  .download-link:hover {
    p.package-download {
      font-weight: 700;
      color: #006a7d;
    }
    .package-download-icon {
      display: none;
    }
    .package-download-icon-hover {
      display: inline;
    }
  }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69304365

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档