图像按钮在 HTML5/CSS3 中不可点击答案

【问题标题】：Image button not clickable in HTML5/CSS3图像按钮在 HTML5/CSS3 中不可点击
【发布时间】：2019-09-01 01:20:26
【问题描述】：

在我的网站上获取可点击图片时遇到问题。我所有带有链接的标准按钮都可以正常工作。下面我将粘贴与相关按钮相关的 CSS 和 HTML5 代码。出于明显的原因，我省略了实际链接。

.button3 {
  background-image: url("donate.png");
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  cursor: pointer;
  width: 200px;
  height: 60px;
  margin-left: 500px;
  margin-right: 5px;
  margin-top: 40px;
}

<div class="button3">
  <a href="link" class="button3"></a>
</div>

【问题讨论】：

是不是因为找不到图片，而你在找不到锚点的时候没有任何内容，所以没有什么可点击的？
@chennighan 图像根据需要正确显示，鼠标正确悬停，但点击时没有任何反应。

标签： html image css button

【解决方案1】：

你可以这样做。（用 s/o 替换您的图像）。使用您当前的样式，我将display: inline-block 添加到锚。

.button3 {
  background-image: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e");
  display: inline-block;
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  cursor: pointer;
  width: 200px;
  height: 60px;
  margin-left: 500px;
  margin-right: 5px;
  margin-top: 40px;
}

<a href="link" class="button3"></a>

Working JSFiddle

【讨论】：

好的，现在我离我的解决方案更近了，除了有点困惑。这里的区别似乎是显示属性。如果我复制粘贴您的代码并替换我的链接和我的图片网址，我的图片将不再显示。如果我粘贴您的代码并在我的 css 样式表上有 2 个 .button3，我的两个图像都会显示并且一个正在工作且可点击，另一个正在显示但不可点击。我的样式表上的两个 .button3 都是相同的，但是如果我的样式表上只有一个，我的按钮图像将不会显示...
根据我们从您的 sn-p 中看到的情况，我们无法知道其他样式正在影响它。我们只是在使用您给我们的东西。

【解决方案2】：

您可以改为将 div 按钮包裹在锚标签中，这样您的锚标签将拉伸到其内容的宽度和高度，从而使您的整个 div 可点击。

请看下面的例子：

.button3 {
  background-image: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e");
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  cursor: pointer;
  width: 200px;
  height: 150px;
  /*margin-left:500px;
  margin-right:5px;*/
  margin-top: 40px;
}

<a href="link">
  <div class="button3">
  </div>
</a>

【讨论】：

根据他的实现，最好使用输入developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image
@nick parsons 将锚标签包裹在 div 类周围产生了相同的结果。图像正确悬停，好像单击它会将我带到一个链接，但单击时没有响应。
@Cale 上面的 sn-p 对你有用吗？如果它在您的代码中起作用但不起作用，那么您网站的其他部分肯定存在另一个问题，导致此