將鼠標懸停在一個圓的不同段上

Question

我目前正在嘗試為我的網站創建一個藍色的，圓形的，餅狀的圖像。 該圈子將分為6個不同的部分。

我想發生的是，當用戶將鼠標懸停在特定的細分上時，該細分將變為橙色，並且一些文本將出現在與該細分相對應的圓圈旁邊。

我在網上找到了一些資源，這些資源幾乎可以使用CSS圖像映射實現所需的效果。 http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/但是，這些技術使用矩形分割圖像。 如果要分割圓形對象，我希望根據特定的弧線分割區域。

我認為這超出了純HTML和CSS的范圍。 盡管我在JQuery方面擁有過往的經驗，但是我對Web語言沒有太多的經驗。 解決問題所需的技術是什么？實施該問題的最佳技術是什么？

Answer 1

您可以創建非矩形但使用多邊形的圖像映射。

這個有用的工具http://www.image-maps.com/可以讓您實現所需的功能，而不必編寫自己的多邊形映射！

Answer 2

一些選擇：

HTML圖片地圖

創建非常接近圓的每個切片形狀的HTML圖像映射很簡單，但是HTML圖像映射存在一些局限性。 例如，您不能將內容嵌套在圖像地圖的每個切片內（這是實現懸停彈出式窗口的一種簡便方法）。 如果HTML圖像映射適合您，這是最簡單的解決方案。

CSS圖像圖

要定義圓形切片形狀，CSS圖像貼圖是不切實際的，除非您僅需要非常粗略地估計每個圓形切片的熱點。 但是，如果您能夠忍受這一點，那么就功能而言，您將擁有更多的靈活性。

的OnMouseMove

您還可以使用onmousemove事件處理程序獲取整個圓的鼠標坐標，然后進行自己的計算以確定鼠標所在的圓切片。這使您可以准確地定義每個圓切片的熱點，並且比HTML圖像映射具有更大的靈活性。 但是計算可能需要一點工作。

Answer 3

為此，我有一個解決方案，主要使用HTML和CSS和少量jQuery來處理圓圈旁邊的文本顯示。

但是，它的確使用了一些CSS屬性，例如pointer-events ，這些屬性並未得到廣泛支持

JSFiddle演示