我正在构建这个小部件:http://codepen.io/JonnyNineToes/pen/zGYxwV
它基本上是一张图片,您可以点击它,并获得有关从其背后“滑出”的图片的额外信息。
我遇到的问题是小部件的可点击/可悬停/交互区域。即使我使用了 border-radius,我仍然在小部件周围得到一个方形的可点击区域。 (将鼠标悬停在框 Angular 应该所在的位置。)
我已经确定问题的根源在于图像元素本身。如果我删除图像元素,我将不再有这个问题。
我已经找到了... Why is the margin space of my image link clickable? 我删除了“显示: block ;”从图像的类规则,我仍然有这个“鬼区”的问题。
我不确定这个元素是怎么回事。这些是唯一应用于它的样式(“.profile”是图像的类):
.profile, .description {
position: absolute;
border-radius: 150px;
width: 300px;
height: 300px;
}
.profile {
left: 0;
top: 0;
z-index: 2;
}
编辑:我也玩过“溢出:隐藏;”正如一些 Stack Overflow 线程所建议的那样,但这也没有帮助。
编辑 2:找到这些:
最佳答案
似乎适用于 Chrome 的解决方案(Firefox 37 似乎按预期工作)是使用另一个元素和背景图像集。其他一切都一样。当然你失去了 alt 属性。如果您使用的图像不仅仅是美观的,那么您应该找到一种方法以其他方式提供该信息,或者坚持使用 <img />
标签。
<span style="background: url('http://i.imgur.com/BfLc7dD.jpg')" class="profile">
关于html - 带圆 Angular 的链接图像的交互区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29781979/