可選擇部分

我期待創造這樣的使用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

回答

相關問題