Ich habe ein Div, das ein Bild mit Text und einem darüber liegenden Button enthält. Der Text ist absolut positioniert und deckt das gesamte Bild ab. Am Ende des Textes befindet sich auch eine Schaltfläche. Ich versuche, das Bild als Link zu verwenden, habe jedoch Probleme damit.

Meine derzeitige Lösung besteht darin, sowohl mein Bild als auch meinen Text in ein einzuschließena Etikett. Dies funktioniert nicht so, als würde der Benutzer beim Versuch, auf die Schaltfläche zu klicken, auf den Link anstelle der Schaltfläche klicken. Ich habe auch versucht, nur mein img-Tag in das einzupackena Tag, aber da mein Text oben positioniert ist, wird der Link niemals als anklickbar registriert.

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; }