0

我有一个图像，其中文本/链接覆盖在顶部。我的问题是，有时前景中的文本会在背景中隐藏图像中的链接。我认为这是因为文本框在文本周围形成了一个不可见的矩形，因此创建了一个看起来它应该属于图像但实际上被文本覆盖的区域。我想知道当我将鼠标悬停在该区域上时，是否有可能链接到我的图像链接，而不是我的文本链接（见图）。

http://jsfiddle.net/WHpMr/

在此处输入图像描述

4

3 回答 3

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%; }
于 2012-10-16T22:58:40.553 回答
1

你这样想是对的。该元素将创建一个包含内容的块。如果您一心想要这样做，您可以使用地图元素。

于 2012-10-16T22:59:04.153 回答
1

如果你让每一行都成为自己的链接，那将最大限度地减少问题。如果你真的想全力以赴，你可以让每个单词都有自己的链接。但是您正在使用一些 JS 自动化而不是在 HTML 中手动完成更容易的事情。

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

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

于 2012-10-16T23:05:05.827 回答