1

我有<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;
}

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

4

4 回答 4

5

放入标签&nbsp;内a

<a class="link" href="/#/index">&nbsp;</a>
于 2013-05-10T10:36:58.967 回答
3

链接

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

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

<a class="link" href="/#/index">&nbsp;</a>
于 2013-05-10T10:39:31.387 回答
0

您的 css 类是指，.home但您的链接有一个link.

编辑：

刚刚意识到您说图像显示正确（并且您已经编辑了问题中的类）。

但是，我在 jsFiddle.net 上尝试了您的 css 和链接，并且效果很好。

编辑2：

从语义上讲，对于屏幕阅读器和谷歌来说，拥有一个空链接（甚至是一个带有 的链接&nbsp;）是不好的做法。由于您没有使用实际图像，因此您不能依赖 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确保它永远不会被看到，并且链接可点击区域不会拖到左侧。

于 2013-05-10T10:36:42.770 回答
0

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

<a><img></a>

或者

<img src="http://asvignesh.in/images/qrcode.png" onClick="window.location.href = 'http://asvignesh.in'" >
于 2013-05-10T10:50:09.053 回答