圆形图像作为广场

我的图像位于大锚的顶部.圆形图像在视觉上看起来是正确的,但是图像仍然在DOM上充当正方形并且限制访问下面的锚.

我怎样才能使圆角图像没有方形可选区域？

这是一个显示问题的JS小提琴.https://jsfiddle.net/jp81fp3u/1/ 整个蓝色方块是一个锚点,但请注意,即使图像是圆形的,它仍然有方形角落阻挡锚点.如果光标要靠近图像,则锚点不会进入悬停状态.

来自JSFiddle的代码:

#wrapper {
    position: relative;
    width: 500px;
    height: 500px;
}

.outer {
    background-color: blue;
    height: 250px;
    width: 250px;
    z-index: 8;
}

.outer a {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 9;  
}

.outer a:hover {
    background-color: green;
}

.circle {
    display: block;
    background: red;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 11;
}

        

    

        
            anchor
        
    
    

// Add this
.catpic {
    background-image: url(https://img.php1.cn/3cd4a/9b0d/ae9/2d998ad7838fbf16.jpeg);
    background-size: cover;
}