使用可选部分创建图形元素

Question

我希望使用CSS创建这样的东西：

当我将鼠标悬停在每个彩色部分上时，我希望能够更改该部分的颜色并显示一个弹出窗口。

我知道使用带有图像地图的画布＆amp;可点击区域坐标是解决这个问题的一种方法，但我想知道是否有一种更简单的方法可以让我用CSS创建图形并为每一块创建一个类。

Answer 1

您应该使用SVG。实际的SVG标记可以作为多个分组元素嵌入到HTML中。

然后，您可以连接javascript事件或使用CSS :hover定位元素。因为浏览器知道它们的确切形状，所以可以获得像素精确的鼠标悬停。

circle:hover {
  opacity: 0.5;
}

<svg width="500" height="500">
  <circle id="circle1" cx="50" cy="50" r="20" fill="red"/>
  <circle id="circle2" cx="150" cy="50" r="40" fill="green"/>
  <circle id="circle3" cx="200" cy="50" r="30" fill="blue"/>
</svg>

许多矢量编辑软件包（如Adobe Illustrator或Sketch）都可以输出SVG图稿。还有online SVG editors。