2

I have 2 SVG paths and I would like them to change fill color when users rollover their parents did. I can get the hover working but only when users hover on the svg. I know it is easy with JS but I would prefer to stick with CSS. 

<div class="button">
   <svg width="100px" height="100px">
       <circle cx="30" cy="30" r="20" style="stroke: black;"/>
   </svg>
</div>

<div class="button">
   <svg width="100px" height="100px">
       <circle cx="30" cy="30" r="20" style="stroke: black;"/>
   </svg>
</div>

CSS:

.button{
    background-color:gray;
    margin-bottom: 20px ;
}

svg{
    fill:green;
}

svg:hover{
    fill:blue;
}

Demo: http://jsfiddle.net/69g7K/

4

3 回答 3

5

我们可以做到这一点，通过使用parent:hoveras 选择器来改变它们各自父级child1的CSS 属性。child2

对 CSS 使用以下内容：

.button:hover .svg1{
    fill:blue;
}

.button:hover .svg2{
    fill:yellow;
}

演示：jsFiddle

于 2016-09-28T13:08:29.983 回答
1

如果您有更复杂的 svg 元素，这是一个技巧，例如，如果您有多个路径，请执行以下操作：

<div class="your-class">
  <svg [svg content...]
    <path ...>
    <path ...>
    <path ...>
</div>

使用 css 不仅可以在特定路径中查找路径：

.your-class{
/* code without rover */
transition: 0.3s ease-in-out;
}
.your-class:hover path{
stroke: #C4C4C4; /* use stroke to color svg lines*/ 
/* use fill to color the inside */

另外（也许值得一提）如果你的 div 只在 svg 周围，你可以使用width: fit-content;你的 div

希望它可以帮助你

于 2020-02-09T16:30:32.173 回答
0 
 svg {
        fill: #444;
    }​

只需为每个 SVG 添加一个类并使用上面的 css，如下所示：

svg.svg1:hover {
            fill: #666;
        }​


svg.svg2:hover {
            fill: #666;
        }​

style="fill: yellow"例如从每个 SVG 路径中删除，否则它将覆盖您的css 

   <svg class=svg1 width=150px height=150px>
       <circle cx=64 cy=64 r=20>
   </svg>


   <svg class=svg2 width=150px height=150px>
       <circle cx=64 cy=64 r=20>
   </svg>

演示：http: //jsfiddle.net/GwWk5/

svg {
    fill: red;
}

svg.svg1:hover {
    fill: blue;
}
svg.svg2:hover {
    fill: green;
}
于 2013-11-07T17:11:20.690 回答