圖片作爲鏈接不起作用

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

圖像顯示正常，但鏈接不起作用，當我將鼠標懸停在圖像光標是默認的，不是指針，點擊後頁面不更新。

來源

2013-05-10 0xAX

是'了'標籤缺少類'.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>

來源

2013-05-10 10:36:58 Sukhpreet

您的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在左邊。

來源

2013-05-10 10:36:42 Maloric

對不起，錯字 – 0xAX 2013-05-10 10:38:18

但對於懸停和鏈接，你需要顯示的文本

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

來源

2013-05-10 10:39:31 Yogus

標籤內的文本/對象的鏈接

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

內將只有重定向鏈接使用

<a><img></a>

或

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

來源

2013-05-10 10:50:09 asvignesh

圖片作爲鏈接不起作用

回答

相關問題