我的图像位于大锚的顶部.圆形图像在视觉上看起来是正确的,但是图像仍然在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;
} <div id="wrapper">
<div class="outer">
<a href="#">
anchor
</a>
</div>
<img src="http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" class="circle" />
</div>