html - 文本链接隐藏了我的图片链接

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