为什么我的a：hover鼠标无法工作，而我的<a> tag won&#39;t go to link on click?

Question

I have been writing a website that is a bunch of different sections on top of one another. The div with the class class="concertDiv" is the container of one section. I'm trying to have an album cover on the left side of this section and on the right side I want three rows of text all clickable to go to a link. I'm trying to make these three <a> tags, placed one on top of another, change color on hover and go to https://google.com却无法点击，所以这两项都不起作用。

这是我的项目HTML / CSS代码：

a.concertDesc {
  white-space: nowrap;
  color: #f65026;
  text-decoration: none;
  margin: 0 auto;
  padding-bottom: 10px;
}

a.concertDesc: hover {
  color: blue;
}

#albumCover {
  border-radius: 7px;
  width: 300px;
  height: 300px;
}

.concertElement {
  display: inline;
}

.concertDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  padding-left: 200px;
  padding-right: 200px;
  padding-bottom: 70px;
}

@media (max-width: 590px) {
  p.concertDesc {
    white-space: pre-line;
  }
}

@media (max-width: 800px) {
  #albumCover {
    display: none;
  }
}

<div class="concertDiv">

  <img id="albumCover" class="concertElement" src="assets/albumCover.jpg" />

  <div class="concertElement" style="padding-left: 15px;">

    <a class="concertDesc" href="https://google.com" target="_blank" style="font-size: 225%;">Click 1</a>

    <a class="concertDesc" href="https://google.com" style="font-size: 150%;">Click 2</a>
    <a class="concertDesc" href="https://google.com" style="font-size: 140%;">Click 3</a>

  </div>

</div>

谢谢

Answer 1

将pointer-events设置为./build会阻止none和touch生效。

  

pointer-events CSS属性设置在什么情况下（如果有）特定的图形元素可以成为指针事件的目标。

click中的空格不属于那里。

Answer 2

好，那么问题一：

    a.concert.Desc: hover此处不应有空白
^
此处

问题二：
删除pointer-events: none; 样式，因为这样会使链接无法正常工作。

好奇：您复制并粘贴了吗？