奇怪的事件处理

Question

我制作了一个简单的网站，该网站的左右两边各有固定位置的箭头（png）图像，它们链接到下一页。
问题是光标无法选择包含图像的锚点元素，如此处所示：

。

这是元素的代码：

<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

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

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

.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;