Question

我的项目的最终目标是让我的圆形图像在鼠标悬停时互动。当用户将它们悬停时，我希望圆圈的各个部分将不透明度更改为.5（从1开始）。我有一个图表的图像，但我不知道如何使一个单一图像的区域在悬停时改变不透明度。我尝试了几件事：

我用自己的地图中的每一块图像映射图表，但我不知道如何改变单个图像（css）区域的不透明度（如果它甚至可能）
我的第二种方法是将图表切成单独的部分并使其不透明.5并将它们全部分开保存。然后，我将图像映射到图表的单个图像，并尝试在悬停（css）
我的最后一种方法是将每张图表保存为单独的图像，当图像悬停时，使用css将不透明度更改为.5。除非我不确定如何定位碎片以在Dreamweaver中形成完美的圆形，否则这种方法非常有效。

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

谢谢

编辑图表图片现已附上

Answer 1

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

为了达到使用纯CSS的效果，我猜你需要像你刚才提到的那样在单个图像中划分图表。定位非常简单。我在下面的演示中使用了一个图像让它旋转。在您的情况下，您可以单独剪切图表的每个部分，并使用绝对位置为他们找到合适的位置。
再次如您所说，您可以使用地图区域来定义图表的各个部分。使用这样的插件：ImageMapster你可以实现你想要的。我已经将这一次用于以下map。它再次非常简单，当悬停在地图的任何部分时，它的背景将被另一个背景替换。在您的情况下，您可以使用完全不透明度保存图表，并在悬停图表的图像时显示50％不透明度。

演示不是很干净，因为我没有花很多时间完成部件的位置，但你可以看到它是如何工作的。

transform: rotate(45deg);

Answer 2

.chart-item { opacity: 0.5; transition:opacity 2s; }
.chart-item:hover { opacity: 1; }

检查文档以获取浏览器支持。

Answer 3

也许创建一个div并将每个图像作为一个div的背景或内容（按顺序），然后为div类创建一个监听器，以使用jQuery在mouseenter或mouseleave上更改不透明度。

这是一个简单的例子（原谅任何错误）：

jQuery的：

$( ".somedivclass" )
  .mouseenter(function() {
    $(this).fadeTo(200, 0.5);
  })
  .mouseleave(function() {
    $(this).fadeTo(200, 1);
  });

关于$.mouseenter()的更多信息

Here's。 $.fadeTo()一些用于{{1}}。

Answer 4

查看此演示。将光标准确地悬停在猫头鹰的眼睛上，您将看到不透明度发生变化。如果将鼠标悬停在图像的其余部分上，它将不会改变。

$('.eye1').on('mouseenter mouseleave', function(e) {
    $('.box2').stop(true, false).fadeToggle(1500)
});

Answer 5

我建议使用svg。以下是您正在尝试做的实现，因为我觉得今天要学习d3.js：

您不需要通过代码制作图表，因为您可以使用html5将svg加载到页面上并使用类似于我的css：

.arc.filled:hover {
   opacity: .8;
   cursor: pointer;
}