Opera 7 interpretiert ":hover" anders

[Philipp Bauer]

Hallo,

ich habe folgendes Problem...
Der neue Opera (alle Versionen 7) wendet die bei "x:hover" deklarierten styles IMMER an (auch wenn es sich nicht um einen Link handelt !
Alle andern Browser (auch Opera 6) haben dies nur bei Links getan, daher ist auch mein Quelltext so geschrieben und kann nicht ohne Weiteres geändert werden.

Beispiel: http://www.duff-force.de/index2.php?action=news

Kann ich dem Browser irgendwie sagen, dass er es wie vorher interpretieren soll ohne den kompletten Quelltext zu ändern ?

Vielen Dank schonmal ;)
Philipp Bauer

[MudGuard]

Hi,

Der neue Opera (alle Versionen 7) wendet die bei "x:hover" deklarierten styles IMMER an (auch wenn es sich nicht um einen Link handelt !

Vollkommen korrekt.

Alle andern Browser (auch Opera 6) haben dies nur bei Links getan, daher ist auch mein Quelltext so geschrieben und kann nicht ohne Weiteres geändert werden.

Falsch, Mozilla macht das auch schon ziemlich lange.
Ist auch richtig so - es gibt bei der :hover-Pseudoklasse keinerlei Einschränkung auf Links.

Kann ich dem Browser irgendwie sagen, dass er es wie vorher interpretieren soll ohne den kompletten Quelltext zu ändern ?

Nein - er verhält sich korrekt, Deine Stylesheets sind falsch.
Versuche also gar nicht erst, an den Symptomen rumzudoktorn, vernichte die Ursache.

cu,
Andreas

[MudGuard]

Hi,

Nachtrag:

Der neue Opera (alle Versionen 7) wendet die bei "x:hover" deklarierten styles IMMER an (auch wenn es sich nicht um einen Link handelt !

a:link:hover könnte Dein Problem evtl. lösen - ggf. verursacht das aber wieder neue Probleme...

cu,
Andreas

[Tobias Kloth]

Hallo Philipp,

Der neue Opera (alle Versionen 7) wendet die bei "x:hover" deklarierten styles IMMER an (auch wenn es sich nicht um einen Link handelt !

es handelt sich nicht um einen Link, aber um einen Anker - und der "läuft" ebenfalls über <a... für das du ja :hover-Eigenschaften vergeben hast.

Alle andern Browser (auch Opera 6) haben dies nur bei Links getan,

du hast keinen Mozilla? - der macht es nämlich genauso...

Beispiel: http://www.duff-force.de/index2.php?action=news

-></faq/#Q-19>

Kann ich dem Browser irgendwie sagen, dass er es wie vorher interpretieren soll ohne den kompletten Quelltext zu ändern ?

a[href]:hover { ... } sollte nur auf Links (nicht aber auf Anker) wirken (das hat nur mal wieder einen Haken - der IE zu blöd für sowas).

Grüße aus Nürnberg
Tobias

[molily]

Hallo,

a[href]:hover { ... } sollte nur auf Links (nicht aber auf Anker) wirken (das hat nur mal wieder einen Haken - der IE zu blöd für sowas).

Kannst du bitte nachdenken, bevor du deine IE-Bashing-Phrase abspulst? Der MSIE interpretiert :hover sowieso nur für Links, also a-Elemente mit href-Attribut, insofern ist deine Anmerkung nicht nur sachlich falsch, sondern auch ziemlich nervig.

Mathias

[Tobias Kloth]

Hallo Mathias,

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?
Eine Möglichkeit könnte noch sein das id-Attribut zu verwenden (nur kann das afaik ns4 nicht)

@Philipp: für was ist denn eigentlich <a class="news">...(</a>) wenn du nicht a sondern ein anderes Element nimmst, dürfte ein Teil des Problems behoben sein.

Grüße aus Nürnberg
Tobias

[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

[Thomas Luethi]

Hallo,

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)

Moeglichkeit 4: Leere Anker.
<a name="sprungziel"></a>

Das kann auch Netscape 4.x
Und kommt mir jetzt nicht mit "es soll aber Browser geben, die das nicht koennen!"...
Das war 1994 [1].

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>

Ich kann die Gedanken des Autors dieses Quaelcodes auch nicht lesen.
Vielleicht erliegt er dem Irrglauben, dass nur <a>-Elemente eine Klasse kriegen koennen?

mfg
Thomas

[1] http://lists.w3.org/Archives/Public/www-html/1994Sep/0009.html

[Tobias Kloth]

Hallo Mathias,

Nein, hast du nicht, aber eben weil u.a. MSIE keine Attributselektoren versteht, ist diese Lösung unbrauchbar und nicht empfehlenswert,

ich habe doch gesagt, dass a[href]:hover den Haken hat, dass es im IE nicht funktioniert :-)

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.

soweit war ich auch schon...

Es ist höchstens komplett umgekehrt möglich.

...nur darauf bin ich irgendwie nicht gekommen (->2.Möglichkeit) - vielleicht sollte ich langsam ins Bett gehen :-)

Möglichkeit 1: mehrere Pseudoklassen hintereinander in einem Selektor
[...]
Möglichkeit 2: Überschreiben der Styles für a[name] bzw. a[id]
[...]
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.

zur Not müsste man eben zwei <a>s einbauen - eines als Link, und das andere als Anker (nur mit " " oder " " drin)

Möglichkeit 3: Der Verzicht auf a-Anker

*schäm* ich könnte schwören ein <a name="..."> gesehen zu haben - nur finde ich jetzt keines - nur <a class="...">

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.

da hast du Recht.

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:

mir auch nicht - zumal auch noch </a> fehlt :-)

Grüße aus Nürnberg
Tobias

[Philipp Bauer]

Erstmal danke für die zahlreichen Antworten ;)

Möglichkeit 1: mehrere Pseudoklassen hintereinander in einem Selektor

Habe ich jetzt vorläufig verwendet, da dies ohne weiten Aufwand und mit dem gewünschten Ergebnis (zummindest bei den getesteten Browsern) geklappt hat.

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>

Die Elemente dienen dazu die Schriftfarbe der Überschrift (a.newstop)festzulegen...

Meine styles.css sieht jetzt folgendermaßen aus:
------------------------------------------------------
a.newstop { font-family:Arial, Verdana; font-size: 8pt; font-weight:100; text-decoration: none; color:#FFFFFF }

a.news { font-family:Arial, Verdana; font-size: 8pt; font-weight:100; text-decoration:none; color:#000000 }
a.news:link:link { text-decoration:none; color:#FFFFFF }
a.news:link:visited { color:#FF8080 }
a.news:link:hover { color:#FF0000 }
------------------------------------------------------

Ich hoffe keinen grundlegenden Denkfehler gemacht zu haben...
Andernfalls sagt mir bitte falls dies doch geschehen ist !

Zu den fehlenden </a> die Tobias bemängelt hat, kann ich leider nur sagen - Ich weiss auch nicht wo die hinverschwunden sind :(

Gruß
Philipp

[Tobias Kloth]

Hallo Philipp,

(zummindest bei den getesteten Browsern)

mit welchen hast du denn getestet?

<td width="70%" align="left"> <a class="newstop">Play Dust for real</td>
Die Elemente dienen dazu die Schriftfarbe der Überschrift (a.newstop)festzulegen...

warum schreibst du dann nicht das class="newstop" mit in das <td> rein? oder - besser - nimmst <h1>-<h6> was ja schließlich für Überschriften gedacht ist?

a.newstop { [...] }

dann musst du natürlich das a wegmachen...

Zu den fehlenden </a> die Tobias bemängelt hat, kann ich leider nur sagen - Ich weiss auch nicht wo die hinverschwunden sind :(

jaja, jetzt will es wieder keiner gewesen sein :-)

Grüße aus Nürnberg
Tobias

[Philipp Bauer]

(zummindest bei den getesteten Browsern)
mit welchen hast du denn getestet?

Bissher nur mit IE5 und Opera7

<td width="70%" align="left"> <a class="newstop">Play Dust for real</td>
Die Elemente dienen dazu die Schriftfarbe der Überschrift (a.newstop)festzulegen...
warum schreibst du dann nicht das class="newstop" mit in das <td> rein? oder - besser - nimmst <h1>-<h6> was ja schließlich für Überschriften gedacht ist?

a.newstop { [...] }
dann musst du natürlich das a wegmachen...

Diese Anmerkung hat jetzt wesentlich zu meinem Verständnis von CSS beigetragen -> danke ;)
(vorher: ganz nach dem Motto "Warum einfach wenn's auch kompliziert geht?")

Zu den fehlenden </a> die Tobias bemängelt hat, kann ich leider nur sagen - Ich weiss auch nicht wo die hinverschwunden sind :(
jaja, jetzt will es wieder keiner gewesen sein :-)

Hoffentlich wird der Schuldige bald gefunden - solche Verbrecher gehörn hinter Gitter :D

Gruß
Philipp