图片作为链接不起作用

问题描述：

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

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

是'了'标签缺少类'.home' – 2013-05-10 10:39:35

它的工作对我来说在这里：http://jsfiddle.net/AX53h/（铬） – 2013-05-10 10:39:41

我试着捣鼓在Firefox和IE9中通过@RomainBraun和链接工作。我没有看到什么？ – 2013-05-10 11:00:01

答

把 的a标签

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

答

您的CSS类是指.home，但您的链接有一类link。

编辑：

只是意识到，你说的图像正常显示（和你已经编辑了问题类）。

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

编辑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确保它永远不会出现，并且该链接可点击区域没有的踪迹f在左边。

对不起，错字 – 0xAX 2013-05-10 10:38:18

答

但对于悬停和链接，你需要显示的文本

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

答

标签内的文本/对象的链接

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

内将只有重定向链接使用

<a><img></a>

或

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

图片作为链接不起作用

相关推荐