使CSS网格上的项目成为超链接 [英] Make item on CSS grid a hyperlink

问题描述

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

I am working with the CSS grid. I thought that I could make one single grid item to a hyperlink, if I wrapped it in an a tag. But I can see that this solution is not working.

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

The whole grid consist of around 30 grid elements made with the CSS grid. Building the grid up with flex boxes is therefore not a good solution.

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

Does anybody have an idea on how I can turn the whole grid column into a hyperlink?

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

推荐答案

1. 您要使用网格 ，但您要使用 flex ，因此将 dispaly 更改为 网格

1. You want to use grid but you use flex so change the dispaly to grid

OR
如果要使用 flex 而不使用 grid-column / row

使用 wrap div并设置在点击上单击 href 进行演示链接，使用 cursor：指针；

Use wrap div and set href on click to demo link use 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网格上的项目成为超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！