文字鏈接隱藏我的圖片鏈接

Question

我有一個圖像，文字/鏈接覆蓋在頂部。我的問題是，有時前景中的文本會隱藏背景中圖像中的鏈接。我認爲這是因爲文本框在文本週圍形成了一個不可見的矩形，因此創建了一個區域，該區域應該屬於圖像，但實際上正在被文本覆蓋。我想知道是否有可能將鼠標懸停在該區域上時，我將鏈接到我的圖像鏈接，與我的文本鏈接相反（請參見插圖）。

http://jsfiddle.net/WHpMr/

Answer 1

試試這個，即內把您的標記：http://jsfiddle.net/WHpMr/3/

HTML：

<div class="ad"> 
    <span class="link middle right"><a href="#text" class="inline-link">my text link abcdefg<br>meow<br>meow<br>meow</a></span> 
    <a href="#background"><img src="http://www.placekitten.com/320/200"></a> 
</div> 

CSS：

.ad { 
    position: relative; 
    height: 200px; 
    width: 320px; 
} 
.link { 
    position: absolute; 
    padding: 20px; 
    pointer-events: none; 
} 
.inline-link { 
    pointer-events: all; 
} 
.top { top:0%; } 
.middle { top:33%; } 
.bottom { top:66%; } 
.left { text-align:left; left:0%; } 
.center { text-align:center; margin:0 auto; width:100%; } 
.right { text-align:right; right:0%; } 

Answer 2

你認爲這是正確的。該元素將創建一個包含內容的塊。如果你想要這樣做，你可以使用Map元素。

Answer 3

如果您讓每一行都有自己的鏈接，那麼這將最大限度地減少問題。如果你真的想全力以赴，你可以讓每個單詞都有自己的鏈接。但是，你正在進入的東西，更容易與一些JS自動化，而不是手動在HTML中。

編輯：這裏是在香草JS解決方案，爲您簡單的例子工程，至少嘗試：

http://jsfiddle.net/aLN2d/35/