図形のクリック/ホバーをJavascriptやCSSで検出しないでください

Question

CSSでをクリック/ホバーすることでを検出できるようにしたいと考えています（<img>タグとSVGソースファイル）が、周囲のボックスモデルの不動産にはない。下の画像では、クリック/ホバーを聞く領域は淡い青色で、「余分な」領域はオレンジ色です。クリック/ホバリングをリッスン以下1 - 私の特定のケースで

は、私は2つの円他の上に1つを持っています。したがって、私は淡青色の輪を聞くだけです。しかし、ボックスモデルによれば、基礎円がクリック/ホバリングを検出するためには、ユーザは、その正方形のオレンジ色のストライプをクリックまたはホバーする必要がある。

Answer 1

は、私はあなたがSVGから画像を変換し、onclickイベントのための領域を指定するには、イメージマップのポリゴンを使用する必要があると思います。

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

Answer 2

また、あなたのイメージに設定されたCSSボーダー半径と背景画像との2つのdivを（一方が他方の周りwraped）を使用することによって、これを達成することができます。 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