html - Round Image Acting as Square -

I have an image that is located above the large anchor. The round image looks visually correct, though the image still acts as a square on the DOM and is limiting the use of the anchor below.

How can I make it so that there is no class selection area of ​​the shot image?

There is a JS Bella to show the problem here. The whole blue square is an anchor, but notice that the image is round, yet it has square corners that block the anchor. If the cursor has to pass the image then the anchor dome does not enter the state.

Code from JSFiddle:

  #wrapper {status: relative; Width: 500px; Height: 500px; }. {Background color: blue; Height: 250px; Width: 250px; Z-index: 8; }. A {display: block; Width: 100%; Height: 100%; Z-index: 9; } .ter a: hover {background color: green; }. Circle {display: block; Background: Red; Width: 170px; Height: 170px; Limit-Radius: 50%; Status: Completed; Top: 25px; Left: 25px; Z-index: 11; }  

  & lt; Div id = "wrapper" & gt; & Lt; Div class = "external" & gt; & Lt; A href = "#" & gt; Anchor & lt; / A & gt; & Lt; / Div & gt; & Lt; Img src = "http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt = "" square = "circle" /> & Lt; / Div & gt;  

< P> Make the image with div border-radius from half to width so that it becomes a circle.

HTML

  & lt ;! - - change it - & gt; & Lt; Img src = "http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt = "" square = "circle" /> & Lt ;! - To do this - & gt; & Lt; Div square = "circle catpick" & gt; & Lt; / Div & gt;  

CSS

  // Add it. Cotton {background-image: url (http: //i.ytimg com / vi / tntOCGkgt98 / maxresdefault.jpg); Background size: cover; }  

Note, however, that is so, so you may have to use it to get around it.