可选择部分

我期待创造这样的使用CSS创建图形元素并出现一个弹出窗口。可选择部分

我知道使用带有图像地图的画布&可点击区域坐标是解决这个问题的方法之一，但我想知道是否有更简单的方法可以让我使用CSS创建图形并设置每一个级别的它。

2016-12-13 Sekoul

CSS功能不足以执行此操作。如果你想以编程方式绘制这个画布，画布将是最合适的。 –

你*可以*只是在你的CSS中做到这一点是分裂成三个图像。然后你可以使用：hover和'background-image'来切换每个箭头以获得不同的彩色版本。 –

您应该使用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或草图可以输出SVG艺术品的

大量。也有online SVG editors。

来源

2016-12-13 21:21:44 Soviut

这就是我正在寻找的 - 谢谢你Soviut！ – Sekoul

回答

相关问题