问题描述
我正在使用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>
推荐答案
-
您要使用
网格
,但您要使用flex
,因此将dispaly
更改为
You want to use
grid
but you useflex
so change thedispaly
togrid
OR
如果要使用 flex
而不使用 grid-column / row
使用 wrap
div并设置进行演示链接,使用 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网格上的项目成为超链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!