css - 悬停在类中的所有元素时更改颜色

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>