Question

我正在使用CSS网格。我以为只要将其包装在a标记中，就可以使一个网格项成为超链接。但是我可以看到此解决方案不起作用。

整个网格由CSS网格构成的大约30个网格元素组成。因此，使用弹性框构建网格不是一个好的解决方案。

有人对我如何将整个网格列变成超链接有想法吗？

.item2 {
  grid-row: 1 / 1;
  grid-column: 7/13;
  height: 340px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  background-image: url("https://vouzalis.dk/Static/Cms/3cb56b7b-b099-487e-a160-f288ade024f7.jpg");
}

<a href="https://www.google.com">
  <div class="item2 bg-img">
    <a href="sbp-tag">FEATURED</a>
    <a class="sbp-title light-font" href="https://www.google.com">Go to Google</a>
  </div>
</a>

Answer 1

您要使用grid ，但是您要使用flex，因此请将dispaly更改为grid

OR 如果您想使用flex，请不要使用grid-column/row
使用wrap div并在点击上设置href以演示使用cursor: pointer;

.wrap{
    cursor: pointer;
}
.item2 {
      grid-row: 1 / 1;
      grid-column: 7/13;
      height: 340px;
      display: grid;
      background-image: url("https://vouzalis.dk/Static/Cms/3cb56b7b-b099-487e-a160-f288ade024f7.jpg");
    }

<div class="wrap" onclick='location.href = "https://www.w3schools.com";'>
      <div class="item2 bg-img">
        <a href="sbp-tag">FEATURED</a>
        <a class="sbp-title light-font" href="https://www.google.com">Go to Google</a>
      </div>
</div>

使CSS网格上的项目成为超链接

1 个答案: