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

そう考えるあなたは正しいです。この要素は、コンテンツを含むブロックを作成します。あなたがそれをすることに夢中になっているなら、あなたはMap Elementを使うことができます.

于 2012-10-16T22:59:04.153 に答える
1

各行を独自のリンクにすると、問題が最小限に抑えられます。本当にやりたい場合は、各単語を独自のリンクにすることができます。しかし、HTML で手動で行うよりも、JS 自動化を使用した方が簡単な作業に取り掛かることができます。

編集:これは、少なくとも単純な例で機能するバニラJSソリューションの試みです:

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

于 2012-10-16T23:05:05.827 に答える