javascript - 将圆形图像分成 4 片

Question

假设我有这张图片:

现在，我想要实现的是:当鼠标悬停在一个特定的切片上时，该切片会变大一点，而圆圈的其余部分会模糊。

我真的不知道该怎么做，即使使用 Javascript、JQuery 和 CSS!也许我可以映射图像，但我仍然对如何实现我需要的东西有一些疑问。

我的圆形图像的 4 种不同颜色将是 4 种不同的图像，因此我可以将它们一起使用 Photoshop 或使用 HTML 使它们看起来像一个圆圈。我可以使用这两种解决方案。

谢谢你，抱歉我的英语不好 >_>

Answer 1

这可以只用 CSS 来完成 :D

您将制作一个包含四个四分之一硬币的 wrapper 。通过在每个季度的一个 Angular 上设置 border-radius，您将创建一个圆。 在 :hover 上，您可以使用 transform: scale(); 更改大小，在 .wrapper:hover 时使用 opacity 更改模糊度。季度。

div.wrapper { position: relative; width: 100px; height: 100px; border-radius: 50px; }
div.quarter { position: absolute; width: 50px; height: 50px; background-color: #333; transition: transform .5s, opacity .5s; }
div.quarter.left-top { left: 0; top: 0; border-top-left-radius: 50px; }
div.quarter.right-top { left: 50px; top: 0; border-top-right-radius: 50px; }
div.quarter.left-bottom { left: 0; top: 50px; border-bottom-left-radius: 50px; }
div.quarter.right-bottom { left: 50px; top: 50px; border-bottom-right-radius: 50px; }
div.wrapper:hover div.quarter { opacity: .5; }
div.quarter:hover { opacity: 1 !important; transform: scale(1.5) }

<div class="wrapper">
  <div class="quarter left-top"></div>
  <div class="quarter right-top"></div>
  <div class="quarter left-bottom"></div>
  <div class="quarter right-bottom"></div>
</div>