Question

我有<a>背景：

 <a class="link" href="/#/index"></a>

css为它：

.link
{
  display: block;
  width: 50px;
  height: 50px;
  float: left;
  text-indent: -9999px;
  background:  #fff url("/logo.png") no-repeat;
}

图像显示正常，但链接不起作用，当我将鼠标悬停在图像光标上时，默认情况下不是指针，单击后页面不会更新。

Answer 1

将 放入a代码

<a class="link" href="/#/index">&nbsp;</a>

Answer 2

链接

<a class="link" href="/#/index"></a>

但是对于悬停和链接，您需要显示文本

<a class="link" href="/#/index">&nbsp;</a>

Answer 3

您的css类是指.home，但您的链接的类别为link。

修改

刚才意识到你说图像正确显示（你已经在问题中编辑了这个类）。

但是我在jsFiddle.net上尝试了你的css和链接，它工作正常。

编辑2：

从语义上讲，拥有一个空链接（即使是一个 ）是屏幕阅读器和谷歌的不良做法。由于您没有使用实际图像，因此您不能依赖alt标记，因此您应该在链接中添加一些描述性文本，然后将其隐藏起来：

<强> HTML：

<a class="link" href="/#/index">This is my text</a>

<强> CSS：

.link { display: block; width: 50px; height: 50px; float: left; text-indent: -9999px; background: #fff url("/logo.png") no-repeat; text-align:left; text-indent:-999em; overflow:hidden; }

文本缩进删除左侧的文本，而overflow:hidden确保永远不会看到它，并且链接可点击区域不会向左移动。

Answer 4

标签内的文本/对象只能使用重定向链接

<a><img></a>

或

<img src="http://asvignesh.in/images/qrcode.png" onClick="window.location.href = 'http://asvignesh.in'" >

图像链接不起作用

4 个答案: