0

テキスト付きの画像とその上に配置されたボタンを含む div があります。テキストは絶対位置に配置され、画像全体をカバーします。テキストの最後にもボタンがあります。画像をリンクにしようとしていますが、そうするのに問題があります。

私の現在の解決策では、画像とテキストの両方をaタグ内にラップします。ユーザーがボタンをクリックしようとすると、ボタンではなくリンクをクリックするため、これは機能しません。また、タグ内に img タグだけをラップしようとしましaたが、テキストが上に配置されているため、リンクがクリック可能として登録されることはありません。

http://jsfiddle.net/NxtWa/

HTML:

<div class="tile">
    <a href="http://www.google.ca">
        <img src="http://www.placehold.it/480x260">
        <div class="text">
            <p>Long long paragraph</p>
            <button>Button</button>
        </div>
    </a>
</div>

CSS:

.tile { position:relative; width:480px; height:260px; }
.tile .text { position:absolute; top:0px; left:0px; width:480px; height:260px; }
4

1 に答える 1

1

z-index プロパティを使用して、画像の上にテキストとボタンを配置していると思います。適切なイベント ウォッチャー/イベント ハンドラー パターンを使用して、クリック イベントを画像に浸透させる必要があります。これにより、テキストとボタンの適切なクリックが処理され、画像に到達する必要があるものが渡されます。さらに、画像/ボタンのイベント ハンドラーによって。

関連する質問と考えられる解決策: JavaScript pass mouseenter イベントを別の要素の下にある要素に渡す

さらに調査すると、この手法はイベントバブリングと呼ばれます (この用語が以前に私の頭を滑らせて申し訳ありませんでした)。これを行う方法に関する追加のヘルプ @ https://stackoverflow.com/a/1026101/17716

于 2012-10-16T04:08:33.957 に答える