Text Link正在隐藏我的图片链接

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中更容易的东西。

编辑：这是尝试一个适用于您的简单示例的vanilla JS解决方案，至少：

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