将图像划分为多个段，以便在悬停时使用css进行更改

Question

我有这样的图像，分为4个部分。我希望能够在悬停时更改每个细分的模糊。例如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input_1" />
<input type="text" id="input_2" />
<input type="text" id="input_3" />
<input type="text" id="input_4" />

我尝试将这些片段转换为svg蒙版，然后使用剪辑路径，就像在此示例this example中一样，但css仍然将其解释为整个图像，即使只有一部分是可见的。 划分这些段的曲线的形状是复杂的（我想）应该使用svg，因此用于检查x和y位置的javascript技巧不起作用，以及html＆lt;地图＆gt;标签

你会如何解决这个问题？谢谢！

这是第一个分段掩码的svg代码（以防万一）。

#segment1:hover {
  filter: blur(50px);
} 

Answer 1

这样的事情，也许是：

＆＃13;

＆＃13;

.x { opacity:0; }
.x:hover { opacity:1; }

＆＃13;

<svg width="400" height="300" viewBox="0 0 800 600">
  <defs>
    <filter id="blur">
       <feGaussianBlur stdDeviation="8"/>
    </filter>
    <image href="https://i.stack.imgur.com/DkIzu.jpg"
           width="800" height="600" id="img"/>
    <clipPath id="c1">
      <path d="M0 0h400v300h-400z"/>
    </clipPath>
    <clipPath id="c2">
      <path d="M400 0h400v300h-400z"/>
    </clipPath>
    <clipPath id="c3">
      <path d="M0 300h400v300h-400z"/>
    </clipPath>
    <clipPath id="c4">
      <path d="M400 300h400v300h-400z"/>
    </clipPath>
  </defs>
  <use xlink:href="#img"/>
  <use xlink:href="#img" filter="url(#blur)"
       clip-path="url(#c1)" class="x"/>
  <use xlink:href="#img" filter="url(#blur)"
       clip-path="url(#c2)" class="x"/>
  <use xlink:href="#img" filter="url(#blur)"
       clip-path="url(#c3)" class="x"/>
  <use xlink:href="#img" filter="url(#blur)"
       clip-path="url(#c4)" class="x"/>
</svg>

＆＃13;

＆＃13;

＆＃13;

这只是一个带有矩形剪裁蒙版的简单示例，但应该适用于任何形状的蒙版。