添加悬停效果后，似乎无法为图像添加锚标记答案

【问题标题】：Can't seem to add an anchor tag for an image after I added a hover effect添加悬停效果后，似乎无法为图像添加锚标记
【发布时间】：2022-02-03 14:31:31
【问题描述】：

我正在制作一个下载壁纸的网站。在主页上，我想在图像上创建悬停效果，这样我就可以在收藏按钮上添加“喜欢”和“添加”。这是参考：https://unsplash.com/ 我有我想要的悬停效果，但我希望能够单击图像，以便用户可以转到下载页面。但是我添加了悬停效果后似乎无法添加锚标签。

单个图像的 HTML 代码：

.card {
  overflow: hidden;
  position: relative;
  width: 400px;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  opacity: 0;
  padding: 15px;
  transition: opacity 0.25s;
}

.image-overlay--blur {
  backdrop-filter: blur(5px);
}

.image-overlay:hover {
  opacity: 1;
}

.image-overlay>* {
  transform: translateY(-20px);
  transition: transform 0.25s;
}

.image-overlay:hover>* {
  transform: translateY(0);
}

<div class="container-fluid mt-4">
  <div class="row">
    <div class="card ml-4 bg-dark" style="width: 30rem;" data-aos="fade-left">
      <img src="img/1.png" class="card-img-top " alt="...">
      <div class="image-overlay image-overlay--blur">
        <div class="card-text">
          <button type="button" class="btn btn-outline-danger mr-2">Like</button>
          <button type="button" class="btn btn-outline-light mr-2">Add</button>
        </div>
      </div>
    </div>

【问题讨论】：

您的代码中没有锚链接
如果您查看您提供的示例中的代码，图像包含在锚标记中。将图像包裹在锚点中。
是的，我删除了锚标记，因为它不起作用。我有一个锚标签中的图像

标签： html css bootstrap-4

【解决方案1】：

如果您正在寻找没有锚标记的解决方案，请使用图像容器上的 onclick 属性，如下所示：

<div class="image-overlay image-overlay--blur" onclick="window.open('image-link')">

这将在新选项卡中的 window.open() 函数中打开指定的 url。使用第二个参数在同一选项卡中打开链接。

<div class="image-overlay image-overlay--blur" onclick="window.open('image-link', '_self')">

现在如果需要锚标记，请这样做：

<div class="container-fluid mt-4">
  <div class="row">
    <a href="url here" target="_blank" rel="noopener noreferrer">
    <div class="card ml-4 bg-dark" style="width: 30rem;" data-aos="fade-left">
      <img src="img/1.png" class="card-img-top " alt="...">
      <div class="image-overlay image-overlay--blur">
        <div class="card-text">
          <button type="button" class="btn btn-outline-danger mr-2">Like</button>
          <button type="button" class="btn btn-outline-light mr-2">Add</button>
        </div>
      </div>
      </a>
    </div>

【讨论】：