Nichtlinkelemente mit :hover :visited :active etc stylen

[trunx]

Hallo,

ich hab in einer Tabelle allg. über tr:hover eine ganze Zeile sozusagen optisch zu einem Link gemacht (bei IE<7 über js), nun besteht aber folgendes Problem:

Wenn ich auf einer Seite war, werden die besuchten Seiten wie gewünscht andersfarbig, doch diese Information wird beim hovern und auch bei der js-Variante wieder gelöscht, d.h. sie sehen dann wieder wie unbesuchte links aus. Aber leider funktioniert tr:visited nicht :-(, daher meine Frage: für welches andere Element außer a kann man diese Pseudoklassen verwenden?

Wenn ich das Problem mit js löse, komme ich an folgende Grenze: ich hab onmouseover und onmouseout, brauche also bei onmouseout etwas in der Art:
if(Zeile besucht)
  ...color=blau;
else
  ...color=violett;

Aber wie ist der korrekte Parameter für "besucht"?

vielen Dank für Hilfe

bye bye trunx

[wahsaga]

hi,

Wenn ich auf einer Seite war, werden die besuchten Seiten wie gewünscht andersfarbig, doch diese Information wird beim hovern und auch bei der js-Variante wieder gelöscht, d.h. sie sehen dann wieder wie unbesuchte links aus. Aber leider funktioniert tr:visited nicht :-(, daher meine Frage: für welches andere Element außer a kann man diese Pseudoklassen verwenden?

:link und :visited sind explizit als link pseudo-classes bezeichnet, und
"The document language determines which elements are hyperlink source anchors. For example, in HTML4, the link pseudo-classes apply to A elements with an 'href' attribute."

gruß,
wahsaga

[Marian]

Hallo trunx,

Wenn ich auf einer Seite war, werden die besuchten Seiten wie gewünscht andersfarbig, doch diese Information wird beim hovern und auch bei der js-Variante wieder gelöscht, d.h. sie sehen dann wieder wie unbesuchte links aus. Aber leider funktioniert tr:visited nicht :-(, daher meine Frage: für welches andere Element außer a kann man diese Pseudoklassen verwenden?

Da eine Tabellenzeile kein Link ist, kann auch nichts „besucht“ oder „nicht besucht“ sein.

Viele Grüße aus Freiburg,
Marian

[trunx]

Hallo Marian, hallo wahsaga,

vielen Dank für die Antworten. ich geb hier mal den Quelltext an, dann wird vllt klarer, was ich meine:

css:
tr:hover td a { color:#ff0000; }

html:
<tr class="tn">
 <td><a href="url">Sp 1</a></td>
 <td><a href="url">Sp 2</a></td>
 ...
 <td><a href="url">Sp n</a></td>
</tr>

<!--[if lte IE 7]>
<script language="javascript">

window.onload = function att() {
var i = document.getElementsByTagName("tr");
for (var j = 0; j < i.length; j++) {
if (i[j].className == "tn") {
i[j].onmouseover = function an() {
var k = this.firstChild;
while (k != null) {
k.firstChild.style.color="#ff0000";
k = k.nextSibling;
} }
i[j].onmouseout = function aus() {
var k = this.firstChild;
while (k != null) {
k.firstChild.style.color="#0000ff";
k = k.nextSibling;
} } } } }

</script>
<![endif]-->

wie man sieht, benutze ich durchaus links, aber mit :hover bzw. onmouseover zerschiesse ich mir zunächst die dazugehörige visited-Information. Aber sie sollte noch da sein, aber wo?

bye trunx

[wahsaga]

hi,

ich geb hier mal den Quelltext an, dann wird vllt klarer, was ich meine:

Was ist dir denn an den Antworten noch nicht klar?

wie man sieht, benutze ich durchaus links, aber mit :hover bzw. onmouseover zerschiesse ich mir zunächst die dazugehörige visited-Information.

Was willst du da zerschiessen?
Entweder wird a:visited gesondert formatiert, oder nicht.

Aber sie sollte noch da sein, aber wo?

Da, wo sie wenn sie vorhanden ist, immer ist: "Am" Link.

gruß,
wahsaga

[trunx]

Hallo Wahsaga,

vielen Dank für deine Antwort.

Was ist dir denn an den Antworten noch nicht klar?

sie führen zu keiner Lösung meines Problems, es lautet nach wie vor: in einer mehrspaltigen Tabelle soll jeweils eine ganze Zeile als Link fungieren und die drei Zustände :link :hover und :visited sollen dabei jeweils in anderen Farben erkennbar sein.

Da, wo sie wenn sie vorhanden ist, immer ist: "Am" Link.

das denke ich auch, habe ich oben auch geschrieben, aber wie greift man darauf bspw. mit js zu? ...className="visited" klappt ja nicht.

viele Grüße trunx

[wahsaga]

hi,

in einer mehrspaltigen Tabelle soll jeweils eine ganze Zeile als Link fungieren und die drei Zustände :link :hover und :visited sollen dabei jeweils in anderen Farben erkennbar sein.

Noch mal zum mitmeisseln: Für TR ist :visited nicht gültig.

Da, wo sie wenn sie vorhanden ist, immer ist: "Am" Link.

das denke ich auch, habe ich oben auch geschrieben, aber wie greift man darauf bspw. mit js zu? ...className="visited" klappt ja nicht.

Wenn du für eine Klasse visited Formatierungen im CSS angegeben hast, sollte das gehen.

gruß,
wahsaga

[trunx]

Hallo wahsaga,

Noch mal zum mitmeisseln: Für TR ist :visited nicht gültig.

das habe ich gewußt, deshalb meine Ursprungsfrage, ob andere Elemente außer a dies zulassen; aber auch das hab ich verstanden, dass das nur für a möglich ist. Damit ist aber wie gesagt mein Problem nicht gelöst ;-)

das denke ich auch, habe ich oben auch geschrieben, aber wie greift man darauf bspw. mit js zu? ...className="visited" klappt ja nicht.

Wenn du für eine Klasse visited Formatierungen im CSS angegeben hast, sollte das gehen.

du sagst nichts zu js. Ich hab natürlich im css visited Formatierungen vorgenommen, diese werden aber wie gesagt von den oben angegebenen hover Formatierungen gelöscht, vllt mache ich was falsch, deshalb frage ich hier ja nach, wär nett, wenn du mir ne Lösung zeigst oder angibst, wie du ein ähnliches Problem gelöst hast oder lösen würdest.

vielen Dank für deine Antworten und einen schönen Abend

trunx

[wahsaga]

hi,

du sagst nichts zu js.

Was möchtest du denn hören?

Ich hab natürlich im css visited Formatierungen vorgenommen, diese werden aber wie gesagt von den oben angegebenen hover Formatierungen gelöscht,

Klingt ja spannend - aber kaum nachvollziehbar.

vllt mache ich was falsch, deshalb frage ich hier ja nach, wär nett, wenn du mir ne Lösung zeigst oder angibst, wie du ein ähnliches Problem gelöst hast oder lösen würdest.

Du wirst eine Tabellenzeile kaum dazu bekommen, "bereits besucht" auszusehen, weil sich Tabellenzeilen nicht wie Links "besuchen lassen".

gruß,
wahsaga

[trunx]

Hallo wahsaga,

du sagst nichts zu js.

Was möchtest du denn hören?

wie gesagt, wie greift man auf die Pseudeklassen von a zu, hab es über className="visited" probiert, hat aber nicht funktioniert, wie ist es richtig?

vllt mache ich was falsch, deshalb frage ich hier ja nach, wär nett, wenn du mir ne Lösung zeigst oder angibst, wie du ein ähnliches Problem gelöst hast oder lösen würdest.

Du wirst eine Tabellenzeile kaum dazu bekommen, "bereits besucht" auszusehen, weil sich Tabellenzeilen nicht wie Links "besuchen lassen".

*seufz* mir scheint, wir reden aneinander vorbei, nun ja :-), ich versuch es dir noch mal zu erklären: im Quelltext deutlich zu sehen, sind die Zellinhalte der Tabelle sämtlich von a-Elementen eingeschlossen, d.h. ohne tr:hover... verhalten sich die Tabellenzeilen durchaus als besucht, weil die Ziele aller Zellen einer Zeile gleich sind ;-), das betrifft natürlich auch die Pseudoklasse :active. Nur beim hovern verhält sich nicht die Zeile als ein Link, sondern nur die jeweils gehoverte Zelle. Auch das ist natürlich klar. Versuche ich nun dieses Problem mit tr:hover... zu lösen (und für IE<7 mit js, weil die tr:hover nicht verstehen), dann habe ich zwar die gewünschte hover-Funktionalität und im ersten Moment sehen, wegen der a-Elemente  auch die besuchten Zeilen und die aktive Zeile entsprechend der css Vorgabe aus, gehe ich dann aber über eine solche Zeile, sieht sie danach aus wie ein unbesuchter Link. Das Problem mit :active ist nun über perl gelöst (sind ja sowieso dynamische Seiten), nämlich durch explizize Vergabe der Klasse "t_act", bleibt also nur noch das Problem mit :visited. D.h. nun ist beim Aufruf einer Seite zwar zunächst zu sehen, welche links besucht waren, gehe ich mit der Maus rüber und wieder weg, ist diese Information weg.

Für IE<7 ist mir das klar, schließlich sage ich mit js genau das onmouseover -> rot, onmouseout -> blau, dort würde ich jetzt, wie schon mehrmals nachgefragt, bei onmouseout eine Fallunterscheidung vornehmen etwa in der Art
if(className="visited")
  ...color="violett";
else
  ...color="blau";
da dies aber nicht funktioniert, wüßte ich gern, wie man auf die Pseudoklassen des a-Elements mit js zugreift.

Ich hab natürlich im css visited Formatierungen vorgenommen, diese werden aber wie gesagt von den oben angegebenen hover Formatierungen gelöscht,

Klingt ja spannend - aber kaum nachvollziehbar.

hmm, wenn es nicht so wär, warum sollte ich dann hier fragen und wieder fragen und wieder nachfragen? Ich kann nur sagen, dass ich alle möglichen Formatierungsreihenfolgen ausprobiert hab, es bleibt dabei, nach dem hovern verschwindet die visited-Information in den Nicht-IE-Browsern, die ich hier zum Probieren hab. Ich vermute, dass da etwas ähnliches passiert, wie bei meinem js.

viele Grüße und ein schönes WE

trunx

ps: ich will auch die dritte Frage nicht ganz unter den Tisch fallen lassen, schließlich gibt sie ja dem thread den Namen: gibt es außer dem a-Element noch anderen Elemente, für die sämtliche Pseudoklassen verfügbar sind? vielen Dank

[Der Martin]

Hallo,

wie gesagt, wie greift man auf die Pseudeklassen von a zu, hab es über className="visited" probiert, hat aber nicht funktioniert, wie ist es richtig?

überhaupt nicht. Über die Eigenschaft className kannst du zwar die "echten" Klassen auslesen und setzen. An die Pseudoklassen kommst du aber nicht ran, die werden ja vom Browser kontextabhängig gesetzt.

im Quelltext deutlich zu sehen, sind die Zellinhalte der Tabelle sämtlich von a-Elementen eingeschlossen, d.h. ohne tr:hover... verhalten sich die Tabellenzeilen durchaus als besucht, weil die Ziele aller Zellen einer Zeile gleich sind ;-),

Soweit kann ich folgen.

das betrifft natürlich auch die Pseudoklasse :active.

Nein, da irrst du. Besucht sein können natürlich alle Links, aktiv (also momentan ausgelöst) kann aber immer nur *höchstens einer* sein, ebenso wie focussiert. Wann gilt :active? Genau, vom Niederdrücken bis zum Loslassen der Maustaste, bzw. vom Auslösen des Links per Tastatur bis zur Bearbeitung des Tastendrucks durch den Browser.

Nur beim hovern verhält sich nicht die Zeile als ein Link, sondern nur die jeweils gehoverte Zelle.

Richtig, denn auch :hover kann nur für *höchstens einen* Link gelten.

[...] gehe ich dann aber über eine solche Zeile, sieht sie danach aus wie ein unbesuchter Link.

Dann stimmt mit deinem Javascript und dessen automatischer Klassenkorrektur etwas nicht.

da dies aber nicht funktioniert, wüßte ich gern, wie man auf die Pseudoklassen des a-Elements mit js zugreift.

Wie schon gesagt: Es geht nicht. Diese Information ist ausschließlich browserintern verfügbar.

Ich hab natürlich im css visited Formatierungen vorgenommen, diese werden aber wie gesagt von den oben angegebenen hover Formatierungen gelöscht,

Sicher, du überschreibst ja im onmouseover-Handler auch die vorherigen Werte, ohne sie zu speichern. Dann kannst du natürlich beim onmouseout nicht den alten Wert wiederherstellen, sondern nur einen festen Wert eintragen.

nach dem hovern verschwindet die visited-Information in den Nicht-IE-Browsern, die ich hier zum Probieren hab. Ich vermute, dass da etwas ähnliches passiert, wie bei meinem js.

Da muss ich allerdings auch passen.

ps: ich will auch die dritte Frage nicht ganz unter den Tisch fallen lassen, schließlich gibt sie ja dem thread den Namen: gibt es außer dem a-Element noch anderen Elemente, für die sämtliche Pseudoklassen verfügbar sind?

Nein. AFAIK sind :link, :visited und :active nur für Links definiert, :focus zusätzlich für Formularelemente, und :hover für alle (außer im IE).

So long,
 Martin

[trunx]

Hallo Martin,

auch dir vielen Dank für die freundliche Hilfe, hat mir sehr geholfen.

einen schönen Abend noch

trunx