javascript - 在鼠标悬停时更改不透明度

Question

我的元素的最终目标是使我的圆图图像在鼠标悬停时具有交互性。当用户悬停圆圈时，我希望圆圈的各个部分将不透明度更改为 .5(从 1)。我有图表的图像，但我不确定如何使单个图像的区域在悬停时改变不透明度。我尝试了几件事:

• 我用自己的 map 中的每个部分对图表进行了图像映射，但我不确定如何更改单个图像 (css) 区域的不透明度(如果可能的话)
• 我的第二种方法是将图表分割成单独的部分，将它们的不透明度设置为 0.5，然后将它们全部单独保存。然后，我对图表的单个图像进行图像映射，并尝试在悬停时加载单个图像 (css)
• 我最后的方法是将图表的每一部分保存为单独的图像，当图像悬停时，使用 css 将不透明度更改为 .5。这非常有效，除了我不确定如何在 Dreamweaver 中放置碎片以形成一个完美的圆圈。

非常感谢任何方向或建议。我愿意学习 javascript 或 jquery 来帮助完成这项工作。

谢谢

编辑现在附上图表图片

http://i.stack.imgur.com/KwIfY.jpg

Answer 1

我不确定我是否理解了关于当前答案的正确问题，但如果您想使图表的各个部分互动，我有两种方法:

1. 要使用纯 CSS 实现效果，我想您需要像您已经提到的那样将图表分成单独的图像。定位非常简单。我在我的演示中使用了一张图片，让它旋转。在您的情况下，您可以单独切割图表的每个部分，并使用绝对定位为它们找到正确的位置。

2. 正如您已经提到的，您可以使用 map 区域来定义图表的各个部分。使用这样的插件:ImageMapster你可以实现你想要的。我已经为以下 map 使用过一次.再次非常简单，当悬停在 map 的任何部分时，它的背景将被另一个背景替换。在您的情况下，您可以保存完全不透明的图表，并在悬停时显示 50% 不透明度的图表图像。

Demo

Demo 不是很干净，因为我没有花太多时间来完美定位零件，但您可以看到它是如何工作的。

transform: rotate(45deg);