使用Javascript或CSS检测形状上的点击/悬停，而不是它的盒型模型的矩形

Question

我希望能够使用CSS检测点击/悬停在形状上（<img>标签，带有SVG源文件），但不是在它周围的箱式房地产上。在下面的图片中，听取点击/悬停的区域是浅蓝色的区域，而“额外”的区域是橙色的。

在我的具体情况，我有两个圆一个在另一个之上 - 以下监听点击/悬停的一个。因此，我希望浅蓝色环带只听取它们。但是，根据盒子模型，为了使底层圆圈检测到点击/悬停，用户必须点击或悬停在该方形橙色条纹上。

Answer 1

我认为你需要将图像从SVG转换和使用图像地图的多边形来指定一个onclick事件的区域。

https://developer.mozilla.org/en/docs/Web/HTML/Element/map

Answer 2

您还可以通过使用两个div（一个围绕另一个挤包），用CSS边界半径和背景图片设置为你的形象实现这一目标。通过stopPropagation()和cancelBubble，您可以将点击行为设置为您最喜欢的行为。

HTML

<div class="big_cycle" onclick="alert ('clicked');"> 
    <div class="small_cycle" onclick="event.cancelBubble = true; event.stopPropagation();"></div> 
</div> 

CSS

.big_cycle { 
    width: 50px; 
    height: 50px; 
    position: relative; 
    cursor: pointer; 
    background-color: #f00; 
    border: 1px solid #000; 
    border-radius: 25px; 
} 

.small_cycle { 
    width: 28px; 
    height: 28px; 
    position: absolute; 
    left: 10px; 
    top: 10px; 
    cursor: default; 
    background-color: #0f0; 
    border: 1px solid #000; 
    border-radius: 14px; 
} 

我做了一个简单的Plunker证明：Click me