html - 奇怪的事件处理

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-leftand.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%; }

标签： htmlcssweb

Answer 1

你可以试试and 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;