Question

如何在图像地图上创建鼠标悬停效果到不规则形状？不规则形状可能非常复杂，不是聚/矩形/三角形/圆形，而是灯笼或动物形状。这有可能吗？

Answer 1

您可以尝试使用SVG矢量图像来选择特定的不规则形状。

CSS看起来像：

.shape:hover {
    fill: green;
}

和html SVG：

<svg version="1.0" width="291.000000pt" height="300.000000pt">

<g class="rabbit"fill="#000000" stroke="none"  transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)">

<path .../>

示例：http://codepen.io/phelpsiv/pen/rLYvrp

Answer 2

尝试基于cordinates：

<map id="honeycomb" name="honeycomb">
    <area shape="poly" alt="" title="" coords="493,23,572,65,573,159,491,204,415,158,415,67" href="" target="" />
    <area shape="poly" alt="" title="" coords="651,22,732,66,732,158,652,203,574,158,573,66" href="" target="" />
    ...
</map>

演示： jsFiddle

如何在图像地图上创建鼠标悬停效果到不规则形状

2 个答案: