Question

我正在创建一个交互式世界地图，当悬停在区域上时，区域会改变颜色。我有一个svg文档，并创建了将ID分组的类。当我填写CSS时，整个类都会更改颜色，但是当我.class：hover时，它只会更改ID的颜色。

<style>
.NA:hover { fill: #ED0887 !important }
.LA:hover { fill: #ED0887 !important }
</style>

SVG中的示例：

 <path class="LA" fill="black" id="costa rica" d="m217.38,304.98l1.39,2.72l1.13,1.5l-1.52,4.51l-2.9,-2.04l- etc..

它应该更改类中所有ID的颜色。

Answer 1

我一开始不理解您的问题，但这是我的修改：

.big{
  fill:#FFFFFF;
  stroke:#000;
}
.small{
  fill: #ccc;
  stroke:#000;
}

path:hover{
  fill:#000;
  stroke:#ccc;
}

<svg width="109.38px" height="113.5px" viewBox="0 0 109.38 113.5">

<path class="big" d="M78.5,24c41,41,40,89,0,89s-78-58-78-78S17.5,0.5,35,0.5S78.5,24,78.5,24z"/>
<path class="small" d="M47.5,43c-9,8-13,24,0,24s22,17,29,0s23-30,7-29s-11,3-19,4S47.5,43,47.5,43z"/>
<path class="small" d="M66.5,50c-0.18,0-0.39-0.01-0.63-0.02c-2.4-0.13-7.37-0.71-7.37,2.02c0,3-4,6,2,7s15-2,16-5s2-7-3-6
	S66.5,50,66.5,50"/>
</svg>

如果要将其保留为一个特定的svg，则必须给该svg一个类或ID：

#my-svg > path:hover{
  fill:#000;
  stroke:#ccc;
}
.big{
  fill:#FFFFFF;
  stroke:#000;
}
.small{
  fill: #ccc;
  stroke:#000;
}

<!--svg you want the hover on-->

<svg id="my-svg" width="109.38px" height="113.5px" viewBox="0 0 109.38 113.5">
<path class="big" d="M78.5,24c41,41,40,89,0,89s-78-58-78-78S17.5,0.5,35,0.5S78.5,24,78.5,24z"/>
<path class="small" d="M47.5,43c-9,8-13,24,0,24s22,17,29,0s23-30,7-29s-11,3-19,4S47.5,43,47.5,43z"/>
<path class="small" d="M66.5,50c-0.18,0-0.39-0.01-0.63-0.02c-2.4-0.13-7.37-0.71-7.37,2.02c0,3-4,6,2,7s15-2,16-5s2-7-3-6
	S66.5,50,66.5,50"/>
</svg>

<!--svg you dont want hover on-->

<svg id="other-svg" width="109.38px" height="113.5px" viewBox="0 0 109.38 113.5">
<path class="big" d="M78.5,24c41,41,40,89,0,89s-78-58-78-78S17.5,0.5,35,0.5S78.5,24,78.5,24z"/>
<path class="small" d="M47.5,43c-9,8-13,24,0,24s22,17,29,0s23-30,7-29s-11,3-19,4S47.5,43,47.5,43z"/>
<path class="small" d="M66.5,50c-0.18,0-0.39-0.01-0.63-0.02c-2.4-0.13-7.37-0.71-7.37,2.02c0,3-4,6,2,7s15-2,16-5s2-7-3-6
	S66.5,50,66.5,50"/>
</svg>

您甚至可以通过与类进行分组来变得更加具体，然后通过提供路径类来变得更加具体：

.my-group > my-path:hover{
        fill:#000;
          stroke:#ccc;
}

更新：

要使同一类中的所有路径都悬停：

.my-svg:hover > path{
  fill:#0097A7;
  stroke:#ccc;
}
.big{
  fill:#FFFFFF;
  stroke:#000;
}
.small{
  fill: #ccc;
  stroke:#000;
}

 <svg class="my-svg" width="109.38px" height="113.5px" viewBox="0 0 109.38 113.5">
    <path class="big" d="M78.5,24c41,41,40,89,0,89s-78-58-78-78S17.5,0.5,35,0.5S78.5,24,78.5,24z"/>
    <path class="small" d="M47.5,43c-9,8-13,24,0,24s22,17,29,0s23-30,7-29s-11,3-19,4S47.5,43,47.5,43z"/>
    <path class="small" d="M66.5,50c-0.18,0-0.39-0.01-0.63-0.02c-2.4-0.13-7.37-0.71-7.37,2.02c0,3-4,6,2,7s15-2,16-5s2-7-3-6
    	S66.5,50,66.5,50"/>
    </svg>

Answer 2

我在SVG中将它们与<g>进行了分组，并使用g:hover将鼠标悬停在特定的组合ID上。谢谢大家！

仅在类徘徊者ID上徘徊

2 个答案: