Pseudoklasse :hover & <p>

[Frank]

Hi Leute,

Ich hab mich mal wieder ein bisschen mit meiner HP beschäftigt und kam auf eine Idee.

Meine IDEE:
Wie wäre es, wenn ich einen Paragraphen einbaue, der beim hover seine Textfarbe ändert.

Gedacht, getan:

schnell eine css-def in den Head und fertig:

<style type="text/css">
p.red {color: black;}
p.red:hover {color: red;}
</style>

und im body:

<p class="red">Ihr seit hier->Home</p>

Eigentliches Ergebnis:
normal: Ihr seit hier->Home
hover: Ihr seit hier->Home

Bei Mozilla funzt das auch so, doch der Microsoft IE muckt natürlich wieder rum und macht garnix!

Meine Reaktion: Ich hab mir die Finger wundgegooglet und heraus gefunden, dass der "schöne" IE ausgerechnet mit p und mit der Pseudoklasse hover Probleme hat.

Nun meine Frage (wird ja auch langsam zeit ^^):

wenn nicht mit :hover und ohne

</p>, WIE DANN?

PS: wo zum teufel is hier die Boardsuche? Ich find die nich^^

 

[Prophet]

Boardsuche befindet sich ganz oben rechts bei dem Link zum profil und der benutzerliste.
Der IE interpretiert die css pseudo-eigenschaft :hover ausschlisßlich bei a sonst nirgend. da kann man höchstens mit js noch wa machen...

 

[philipp]

definiere statt dem p doch einfach ein a.. also
.class a:hover {color: red}

dann nimmts jeder browser

ansonsten

onmouseover="*name*.classname='hover';

 

[XraYSoLo]

auszug aus meiner style-datei:

.norm_link { font-size:12px; color:#FFFFFF; font-weight:500; text-decoration:none; }
.norm_link:hover { font-size:12px; color:#000000; font-weight:500; text-decoration:underline; }

getestet mit:

-ie
-ff
-opera

geht mit allen dreien.

Nils aka XraYSoLo

 

[philipp]

aber nur im <a>link</a>, oder?

 

[Prophet]

? das wäre semantisch und in hinsicht auf html absolut falsch

 

[flapo]

Ich pfeiff auf die Semantik, wenn der verfluchte IE das nicht kapieren will.

Aber grundsätzlich schau ich schon drauf.

 

[John]

Man kann es auch als unangesprochenen Anker benutzen. Also:

<style type="text/css">
  <!--
    a.absatz
    {
      display:block;
    }
  -->
</style>
<a class="absatz" name="hervorgehoben">Paragraph</a>

Das display:block ist notwendig, weil es sonst kein Blockelement wie ein Absatz ist, sondern nur ein Format für Inlineelemente.
Und diese Anwendung ist semantisch erlaubt.
Man könnte es auch mit JavaScript realisieren, aber das gehört nicht in diesen Bereich (CSS).

 

[Prophet]

semantisch wäre das vollkommener schwachsinn. man missbraucht diese element in übelster weise als paragraphen trenner!

ansonsten hast du natürlich recht.