Styre luft under headlines

:hover er ikke helt så cross-browser, da det i en del browsere kun virker på a-tags ...

-- ellers ville den jo være helt indlysende at bruge (og så bliver noget js-onmouseover nødvendigt !-)

-- og en ganske normal måde at styre det præcis vil være at nulstille margin og padding på alle block-level elementer, og så sætte det præcis i de forskellige element-typer, f.eks.

*{margin:0;padding:0}
h1, h2, h3{margin:0.5em 0;padding:2px}
h4, h5, h6, h7{margin:1em 0;padding:0}
h1{font: 18px Arial,sans-serif bold;}

-- osv.

Men er det ikke også misvisende med en hover-farve på noget tekst, der ikke er et link?

Kan godt være jeg ikke var helt præcis i min formulering. Sagen er den jeg vil arbejde med 3 overskrifter, H1, H2 og H3. Hver overskrift har forskellige størrelse og font-family.

Når der linkes med de forskellige overskrift, evt...:

- <a href="link.html"><h1>Linket</h1></a>
- <a href="link.html"><h2>Linket</h2></a>
- <a href="link.html"><h3>Linket</h3></a>

...bruges altid den samme hover eller mouseover effekt? Hvordan sættes det bedst op i mit Stylesheet og evt. i HTML filen? Er det bedre at lave effekten i en ekstern javascript fil som bare ligger samme effekt på ALLE links? Hvordan laves det og hvad er det mest kompatible at gøre?

-- en h1 må slet ikke ligge inde i et a-tag, da det er inline og derfor ikke kan indeholde block-level elementer ...

-- men du kan jo bare lægge linket inde i, og så styre hover-tingen ved at bruge forskellige selektorer:

- <h1><a href="link.html">Linket</a></h1>
- <h2><a href="link.html">Linket</a></h2>
- <h3><a href="link.html">Linket</a></h3>

h1 a:hover{color:silver;}
h2 a:hover{color:blue;text-decoration:underline;}
h2 a:hover{color:#345;text-decoration overline underline;}

For det første, så er det ikke "lovligt"/gyldigt at have <hX>-elementer inde i <A>-elementer, så A'erne skal ind i H'erne:

- <h1><a href="link.html">Linket</a></h1>
- <h2><a href="link.html">Linket</a></h2>
- <h3><a href="link.html">Linket</a></h3>

Og så kan du jo med CSS skrive:

h1 a:hover{
  noget
}
h2 a:hover{
  noget
}
h3 a:hover{
  noget
}

Ups:

h2 a:hover{color:#345;text-decoration:overline underline;}

Når jeg sætter <h1> og </h1> udenom <a> ligesom i nedenstående bliver teksten ikke til en overskrift, hvorfor?

<h1><a href="link.html">Linket</a></h1>

Hov bare mig der lavede en slåfejl... ups... prøver lige at sætte det op!

Nope det virker ikke ... <h1><a href="link.html">link</a></h1>

bliver ikke til en overskrift.

Så fik jeg det til at virke... Roenving, du var først med en løsning så nok dig der skal lægge et svar.

Velbekomme '-)

-- og tak for point ;~}