html - 怪异事件处理

Question

我制作了一个简单的网站，其中包含左右固定位置的箭头 (png) 图像，链接到下一页。
问题是光标无法选择包含图像的 anchor 元素，如下所示:

.

这是元素的代码:

<a class="arrow-left" href="previousPage.php"><img src="img/left.png"></a>
<a class="arrow-right" href="nextPage.php"><img src="img/right.png"></a>

如您所见，它是纯 html 代码，.arrow-left 和 .arrow-right 类使用 scss 设置样式:

.arrow-right {
  position: fixed;
  max-width: 3%;
  z-index: 10;
  right: 1%;
  top: 50%; }

.arrow-left {
  position: fixed;
  max-width: 3%;
  z-index: 10;
  left: 1%;
  top: 50%; }

Answer 1

您可以在 .arrow-right 和 .arrow-left 上尝试 display: block。

提示:
如果您将以更紧凑的方式编写代码，那么将来修改起来会更容易:

.arrow-right,
.arrow-left {
  display: block;
  position: fixed;
  max-width: 3%;
  z-index: 10;
  top: 50%;
}

.arrow-right {
  right: 1%;
}
.arrow-left {
  left: 1%;
}

然后你只需要在一个地方编辑代码来添加display: block;