nicht angemeldet
Pseudoklasse und adjacent sibling für Safari/Chrome
Hallo Forum,
ich habe folgenden Code, der leider in den og. Browsern nicht funktioniert:
<button>Test1</button>
<a href="http://www.example.de">Test2</a>
a { visibility: hidden; }
button:focus ~ a { visibility: visible; }
a:hover { visibility: visible; }
ich hab jetzt schon ewig gegoogelt und alle möglichen "bugfixes" getestet, aber der zunächst versteckte Link wird einfach nicht sichtbar. Hat wer von euch eine brauchbare Lösung? Das wär wie immer prima :)
ciao und einen schönen Abend
trunx
--
Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>da</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.
Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>da</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.
-
Hallo!
ich habe folgenden Code, der leider in den og. Browsern nicht funktioniert:
Kann ich mit dem aktuellen Chrome unter Win 7 nicht nachvollziehen, d.h. wenn der Button den Fokus hat, wird der Link sichtbar. Mehr kann nach deinem Code auch nicht passieren.
<button>Test1</button>
<a href="http://www.example.de">Test2</a>
> ~~~css > a { visibility: hidden; } > button:focus ~ a { visibility: visible; } > a:hover { visibility: visible; }Ein "nicht sichtbares" Element kann auch nicht gehovert werden. ;-)
Ein adjacent sibling selector ist übrigens
button:focus + a { }
Dein Selektor schimpft sich "General Sibling Selector".Gruß Gunther
-
Hallo,
vielen Dank erstmal für deine Mühe!
ich habe folgenden Code, der leider in den og. Browsern nicht funktioniert:
Kann ich mit dem aktuellen Chrome unter Win 7 nicht nachvollziehen, d.h. wenn der Button den Fokus hat, wird der Link sichtbar. Mehr kann nach deinem Code auch nicht passieren.
mehr soll auch nicht. hmm, ich hab noch WinXP, aber das ändert auch nix daran, dass es auch im Safari unter MacOS X ebenfalls nicht läuft.
Ein "nicht sichtbares" Element kann auch nicht gehovert werden. ;-)
kann es wohl ;) zuvor verschwand der Link (logischerweise) wieder beim Versuch ihn anzuklicken, das ist nun nicht mehr der Fall, wenn man über ihm ist und den Fokus ändert.
Ein adjacent sibling selector ist übrigens
button:focus + a { }
Dein Selektor schimpft sich "General Sibling Selector".da hast du natürlich Recht, das war der gestrigen späten Stunde geschuldet, zeigt aber auch, was ich so probiert hab.
Ein weiteres Problem in dem Zusammenhang ist, dass der IE die Änderung nicht sofort, sondern erst bei Mausbewegung rendert. Ist jetzt vllt nicht so das Riesenproblem, störend ist es allemal, weiß wer, wie man das irgendwie beheben kann?
ciao trunx
--
Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>da</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.-
Hallo,
vielen Dank erstmal für deine Mühe!
vllt. kann man das Problem ja auch anders angehen: ich benutze die obige Konstruktion, um durch die Setzung des Fokus Links sichtbar zu machen. Nun gibt es nicht so viele fokusierbare Elemente und so wie ich das sehe, keines, das Link-Elemente enthalten darf, oder sehe ich das falsch? Wenn man ein div z.B. in allen Browsern stabil fokusieren könnte... (komisch finde ich, dass man in jedem Browser in den Text klicken kann, z.B. um was zu rauszukopieren, was war denn dann so schwer, gleich dem ganzen zugehörigen Element den Fokus zu geben?). Weiß hierzu jemand mehr?
Wär wie immer schön, einen schönen Tag euch allen
trunx--
Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>da</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.-
Hi,
Nun gibt es nicht so viele fokusierbare Elemente und so wie ich das sehe, keines, das Link-Elemente enthalten darf, oder sehe ich das falsch? Wenn man ein div z.B. in allen Browsern stabil fokusieren könnte...
http://www.w3.org/TR/html5/editing.html#attr-tabindex
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Nun gibt es nicht so viele fokusierbare Elemente und so wie ich das sehe, keines, das Link-Elemente enthalten darf, oder sehe ich das falsch? Wenn man ein div z.B. in allen Browsern stabil fokusieren könnte...
http://www.w3.org/TR/html5/editing.html#attr-tabindex
MfG ChrisB
hey, vielen Dank, das ist es!!
mein Code sieht nun so aus<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> .test1 { display: block; width: 200px; height: 40px; background-color: red; } .test1:hover { background-color: yellow; } .test2 { visibility: hidden; } .test1:focus .test2 { display: block; visibility: visible; background-color: green; } .test1:focus:hover { border: 0px; } </style> <title>css test</title> </head> <body> <div class="test1" tabindex="1">Test1 <a href="http://www.google.de" class="test2">Test2</a></div> <div class="test1" tabindex="2">Test3 <a href="http://www.google.de" class="test2">Test4</a></div> <div class="test1" tabindex="3">Test5 <a href="http://www.google.de" class="test2">Test6</a></div> </body> </html>jetzt kann auch das hovern des zuvor versteckten Elements entfallen; der IE spielt ordentlich mit durch das (eigentlich sinnfreie) .test1:focus:hover { border: 0px; }
also nochmal vielen herzlichen Dank :)
ciao trunx
--
Die Standard-Antwort: "Bitte benutze die Forum-Suche!" macht die Forum-Suche kaputt, weil die Suche dann nämlich genau vor allem diese dämliche Standard-Antwort, also Müll liefert. Sinnvoller ist stattdessen folgende Standard-Antwort: "Dieses Thema wurde schon vielfach im Forum besprochen, siehe z.B. <a>hier</a> oder <a>da</a> oder benutze die Forum-Suche z.B. mit den Stichworten 'Stichwort1 Stichwort2'." Danke.
-
-
-
-