Question

如何添加如下所示的Div链接并使之可点击？我正在使用一张图片作为Div的背景，我想使整个图片都可点击。

<div class="grid__item-wrap">
<div class="grid__item" style="background-image: url(img/5.jpg)">
</div>
</div>

我尝试了以下两种方法，但没有一种对我有用。

方法1：

<div class="grid__item-wrap">
<div class="grid__item" style="background-image: url(img/1.jpg)">
<div class="frame__links">
<a style="pointer-events: auto" class="frame__links" href="https://www.google.com/"></a>
</div>
</div>
</div>

方法2：

<div class="grid__item-wrap">
<div class="grid__item" href="https://www.google.com/" style="background-image: url(img/4.jpg); pointer-events: auto;">
</div>
</div>

Answer 1

您需要将要单击的div放在<a>标记内。

<a href="https://www.google.com/">
    <div class="grid__item-wrap">
        <div class="grid__item" style="background-image: url(img/5.jpg)">
        </div>
    </div>
</a>

Answer 2

您可以在点击onclick="window.location.href时使用div来进行重定向，

<div style="cursor:pointer;background-image: url(img/4.jpg)" onclick="window.location.href = 'https://www.w3schools.com';">Hello</div>

方法2：：您可以将div包裹在a标记中，并为background-image和div赋予href a标签的路径。

Answer 3

.frame__links {
     display:block;
     height:100px;
}

Answer 4

.grid__item {
  background-image: url(https://www.w3schools.com/w3css/img_forest.jpg);
  background-repeat: no-repeat;
  background-size: auto;
  text-align: center;
  color: white;
  padding: 50px;
}

<a href="https://www.facebook.com/">
  <div class="grid__item-wrap">
    <div class="grid__item">
      click here
    </div>
  </div>
</a>

Answer 5

将想要的div元素放入tag内。

Answer 6

将div包裹在<a>标记内应该可以。并在CSS中使用cursor属性设置其样式，以表明它是可单击的。

如何在Div中添加超链接并使其可单击？

6 个答案: