HTML Div Element mit H1 und text soll ein link werden

[m3x]

Hab folgendes Problem: Ich habe einen Div-Container mit einem Hintergrundbild. Diesem Container ist eine <h2> Überschrift sowie ein normaler text.

<div>
   <h2>Huhu</h2>
   <p>Teeeeext</p>
</div>

So jetzt würde ich gerne das der gesamte Container ein "Linkfeld" ist. Also sobald wie die Maus über das DIV kommt wird der Hintergrund geändert usw...

Man kann ganz Klar einfach ein Bild samt text machen. Möchte gerne den <h2> Tag behalten ;-)

Jemand eine Idee, googeln hat bislang nur äußerst unschöne beispiele geliefert.

Besten Dank für Ideen

 

[QXARE]

Wenn du es browserübergreifend lösen möchtest, dann musst du den <a>-Tag ins <h2> verlegen, weil der IE6 mit :hover von anderen Elementen außer dem <a>-Tag nichts anfangen kann.

Es gibt eine Lösung mit Javascript die das Problem behebt (zwar nicht schön), aber je nachdem wie wichtig dieses Bild für dich oder den Usern ist doch zu empfehlen bzw. wie gesagt die einzige Lösung.

Auf den Text im <p> Tag musst du verzichten, außer du stopfst den Text in ein span oder whatever, hauptsache ein inline-Element.

<h2><a href="#">H2 Text<span>Text</span></a></h2>

a {
    display: block;
    background: url(bg.jpg);
}
a:hover {
    background: url(bg_hover.jpg);
}

Ka obs geht.

 

[m3x]

<div class="infobox">
   <h2><a href="#">H2 Text<br/><span>Text</span></a></h2>
</div>

mich wunderts grad echt das der validator das schluckt... aber gut :-) funktioniert

 

[IceMatrix]

warum sollte er es nicht schlucken? es ist well-formed.

 

[DerEineDa]

Wohlgeformtheit hat nichts mit Validität zu tun. (Wobei ein valides Dokument natürlich wohlgeformt sein muss.)