Question

我有2个SVG路径，我希望他们在用户滚动父母时更改填充颜色。我可以让悬停工作，但只有当用户将鼠标悬停在svg上时。我知道JS很容易，但我更喜欢坚持使用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;
}

演示：http://jsfiddle.net/69g7K/

Answer 1

我们可以使用parent:hover作为选择器来改变其各自父母内的child1和child2的CSS属性。

对CSS使用以下内容：

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

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

演示：jsFiddle

Answer 2

如果您有一个更复杂的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左右，则可以为您的div使用width: fit-content;

希望它可以帮助您

Answer 3

 svg {
        fill: #444;
    }

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

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


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

从每个SVG路径中移除style="fill: yellow"，否则它将覆盖您的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;
}

在父div悬停上填充SVG（无JS）

3 个答案: