У меня есть 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; }