Opera 7 interpretiert ":hover" anders

[molily]

Hallo,

a[href]:hover { ... }
Der MSIE interpretiert :hover sowieso nur für Links, also a-Elemente mit href-Attribut,
ja, aber Opera und Mozilla nicht - die machen das nur mit a[href]:hover wie von Philipp gewünscht - nur macht das der IE dann wieder nicht, oder habe ich da was falsch verstanden?

Nein, hast du nicht, aber eben weil u.a. MSIE keine Attributselektoren versteht, ist diese Lösung unbrauchbar und nicht empfehlenswert, da das Konzept keine Unterstützung von Browsern zulässt, welche den Selektor nicht verstehen, denn sobald ein a:hover ins Spiel kommt, und das muss es zwangsläufig, wird a[href]:hover unterlaufen. Es ist höchstens komplett umgekehrt möglich.

Noch einmal zusammengefasst:

Möglichkeit 1: mehrere Pseudoklassen hintereinander in einem Selektor

a:link:hover, a:visited:hover { ... }

Wirkt nur auf alle besuchten und unbesuchten Hyperlinks.

Nachteil: Macht offensichtlich vielen Browsern Probleme, sie ignorieren die Regel nicht, sondern interpretieren den Selektor falsch und wenden die Pseudoklassen falsch an (Opera bis 7, MSIE bis 6 soweit ich weiß). Das lässt sich teilweise durch eine bestimmte Kaskade (Reihenfolge von Regeln, welche sich gegenseitig überschreiben) umgehen.
Siehe beispielsweise http://www.richinstyle.com/bugs/table.html unter multiple pseudo classes.

Möglichkeit 2: Überschreiben der Styles für a[name] bzw. a[id]

a:hover {eigenschaft:wert;}
a[name]:hover {eigenschaft:inherit;}

Zuerst werden generell für alle a-Elemente mit der Pseudoklasse :hover Formatierungen vergeben, welche dann für a-Elemente mit name-Attribut wieder rückgängig gemacht werden.

Falls Netscape 4 berücksichtigt werden soll, sollte der Initialwert als Wert wiederholt werden, ohne »inherit«. Beispielsweise:

body {color:black;}
a:hover {color:red;}
a[name]:hover {color:black;}

Nachteil: Es besteht kein hundertprozentig zuverlässiger Zusammenhang zwischen der Unterstützung von dynamischen Pseudoklassen gemäß CSS2 und der von Attributselektoren.

Hierbei darf ein a-Element auch nicht gleichzeitig Anker und Hyperlink sein, sonst wird es beim Hover wie Fließtext dargestellt. Die Lösung ist aber einigermaßen brauchbar.

Möglichkeit 3: Der Verzicht auf a-Anker

Eine Möglichkeit könnte noch sein das id-Attribut zu verwenden (nur kann das afaik ns4 nicht)

Da ich finde, dass die Funktionalität von Hyperlinks anders als etwa ein ausgefeiltes CSS-Layout besonders wichtig ist, würde ich jedoch davon abraten, nur id-Attribute zu verwenden.

Aber wie du sagtest, auf seiner Seite werden anscheinend nicht einmal a-Anker verwendet; mir ist auch nicht klar, welchen Zweck solche a-Elemente erfüllen:

<td width="70%" align="left"> <a class="newstop">Play Dust for real</td>

Grüße,
Mathias