Question

我正在构建这个小小部件：http://codepen.io/JonnyNineToes/pen/zGYxwV

它基本上是一个你可以点击的图像，并且有关于图像从其后面“滑出”的额外信息。

我遇到的问题是小部件的可点击/可移动/交互区域。即使我使用了border-radius，我仍然会在小部件周围获得一个方形的可点击区域。（将鼠标悬停在方框角落的位置。）

我已确定问题的根源是图像元素本身。如果我删除图像元素，我不再有这个问题。

我已经发现了这个...... Why is the margin space of my image link clickable? 我删除了“display：block;”从图像的类中统治，我仍然有这个“鬼区”的问题。

我不确定这个元素到底发生了什么。这些是应用于它的唯一样式（“。profile”是图像的类）：

.profile, .description {
  position: absolute;
  border-radius: 150px;
  width: 300px;
  height: 300px;
}

.profile {
  left: 0;
  top: 0;
  z-index: 2;
}

编辑：我也玩过“溢出：隐藏;”正如一些Stack Overflow线程所暗示的那样，但这也没有帮助。

编辑2：找到这些：

Answer 1

似乎适用于Chrome的解决方案（Firefox 37似乎按预期工作）是使用带有背景图像集的其他元素。其他一切都是一样的。当然你丢失了alt属性。如果您使用的图片不仅仅是美学，那么您应该找到一种方式以另一种方式提供该信息，或者坚持使用<img />标记。

<span style="background: url('http://i.imgur.com/BfLc7dD.jpg')" class="profile">

Codepen Example

带圆角的链接图像的交互区域

1 个答案: