<li>-Punkt Farbe verändern
Take
0 0 1 0 Take
1
<li>-Punkt Farbe verändern
Take
Gunnar BittersmannHallo,
ich habe mal wieder ein kleines Problem.
Und zwar habe ich eine Liste, welche pro Listenpunkt jeweils einen Link enthält.
...
<ul>
<li><a href="bla.html">Bla</a></li>
<li><a href="blubb.html">Blubb</a></li>
</ul>
...
Soweit kein Problem.
Jetzt soll halt beim überfahren des Links, der jeweilige Punkt vor dem Link rot (statt normalerweise blau) werden.
Per JavaScript auch nicht schwer:
...
<ul>
<li><a onmouseover="this.parentNode.style.color='red';" onmouseout="this.parentNode.style.color='blue';" href="bla.html">Bla</a></li>
</ul>
...
Geht das auch mit CSS?
Wenn ich dem <li>-Element ein :hover verpasse, gilt das ja für die ganze Zeile. Und display:inline geht nicht, weil dann der Listenpunkt weg ist...
Schonmal vielen Dank,
Gruß,
Take
-
Grüße,
kA ob das geht - abe rdu kannst odch die farbe 2 mal überschrieben VIELLEICHT ^^
also li:hover eine neue farbe und dann li:hover * ursprüngliche? zwar nei versucht, aber vllt geht das?
MFG
bleicher-
Grüße,
kA ob das geht - abe rdu kannst odch die farbe 2 mal überschrieben VIELLEICHT ^^
also li:hover eine neue farbe und dann li:hover * ursprüngliche? zwar nei versucht, aber vllt geht das?
MFG
bleicherNee, das mein ich nicht, der Link bleibt schon in seiner Farbe, weil er einen spezifischeren Selektor hat (hoffentlich ist das jetzt richtig formuliert :)).
Aber wenn ich dem <li> ein :hover gebe, wirds auch rot, wenn ich mit der Maus _neben_ dem Link nur auf seiner Höhe bin, weil <li> eben ein Block element ist :((Trotzdem danke für die schnelle Antwort.
@Axel Richter: Ja, dass ist so ziemlich das was ich hatte, nur bezieht sich das dann eben auf die ganze Zeile (sh. Beispiel)
Sorry für die unklare Formulierung :)
Gruß Take
-
Grüße,
mal daran gedacht ul-breite zu limitieren?
alternativ "fake" den punkt mit :before
MFG
bleicher-
Grüße,
mal daran gedacht ul-breite zu limitieren?Dann hab ich aber das Problem, dass ich nicht weiß, wie breit die Links sind, und diese dann evtl. umgebrochen werden.
alternativ "fake" den punkt mit :before
Das wäre eine möglichkeit.
MFG
bleicherDankeschön und Gruß
Take
-
-
Hallo
Aber wenn ich dem <li> ein :hover gebe, wirds auch rot, wenn ich mit der Maus _neben_ dem Link nur auf seiner Höhe bin, weil <li> eben ein Block element ist :((
Mach <a> zu einem Block-Element. Dann nimmt es den verfügbaren Platz ein.
Gruß
Ole
-
-
-
Hallo,
...
<ul>
<li><a href="bla.html">Bla</a></li>
<li><a href="blubb.html">Blubb</a></li>
</ul>
...> > Soweit kein Problem. > > Jetzt soll halt beim überfahren des Links, der jeweilige Punkt vor dem Link rot (statt normalerweise blau) werden. > Geht das auch mit CSS? Ich sehe Dein Problem nicht. Hast Du ~~~html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>LI-hover</title> <style type="text/css"> li {color:blue;} li:hover {color:red;} </style> </head> <body> <ul> <li><a href="bla.html">Bla</a></li> <li><a href="blubb.html">Blubb</a></li> </ul> </body> </html>Mal ausprobiert?
viele Grüße
Axel
-
Und zwar habe ich eine Liste, welche pro Listenpunkt jeweils einen Link enthält.
...
<ul>
<li><a href="bla.html">Bla</a></li>
<li><a href="blubb.html">Blubb</a></li>
</ul>
...> > Soweit kein Problem. > > Jetzt soll halt beim überfahren des Links, der jeweilige Punkt vor dem Link rot (statt normalerweise blau) werden. Hallo, Mach aus dem Punkt und den Hover-Punkt eine kleine Grafik, die du im A-Element des Links als Hintergrundbild einfügst, und bei a:hover wechselst. So wird auch gleichzeitig noch der IE-6 bedient, der ja nur A-Elemente hovern kann. UL bekommt ein 'list-style: none', und LI A noch ein geeignetes 'padding-left' Grüße gaby -
So, ich mache es jetzt mit JS, ist ja nur ein optischer Effekt, den nicht unbedingt jeder sehen muss.
Wenn ich den Punkt mit :before einfüge, sitzt er nicht mehr in der Zeilenmitte (vertikal), da hab ich jetzt keinen Bock dran rumzubasteln.
Gruß Take
-
Om nah hoo pez nyeetz, Take!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <style type="text/css" media="all"> ul {display: inline-block;} li:hover {color: red;} a {color: black;} li:hover a {color: black;} </style> <title>Liste</title> </head> <body> <ul> <li><a href="#">text</a></li> <li><a href="#">text</a></li> </ul> </body> </html>Matthias
--
-
Om nah hoo pez nyeetz,
funktioniert in FF 3.6.8, Op 10.60, Ch 6.0, Saf 4.0.4
funktioniert nicht im IE
Matthias
--
-
Om nah hoo pez nyeetz, apsel!
Om nah hoo pez nyeetz,
funktioniert in FF 3.6.8, Op 10.60, Ch 6.0, Saf 4.0.4
funktioniert nicht im IE
<8
Matthias
--
-
Om nah hoo pez nyeetz, apsel!
Om nah hoo pez nyeetz,
:)))
funktioniert in FF 3.6.8, Op 10.60, Ch 6.0, Saf 4.0.4
Sehr Schön!
funktioniert nicht im IE
Schei***egal :D
<!--[if IE]> Bitte nutzen Sie einen Webbrowser! Vielen Dank. <br> <![endif]--><8
Die sowieso.
Matthias
Vielen vielen Dank,
Gruß
Take-
Nabend!
<!--[if IE]> Bitte nutzen Sie einen Webbrowser! Vielen Dank. <br> <![endif]-->
:D Ich hoffe allerdings, es is ne private kleine Seite die nicht aus geschaeftlichen Gruenden auf Besucher angewiesen ist. -- Ich bin dafuer verantwortlich was ich sage, nicht dafuer, was Du verstehst.-
Ich hoffe allerdings, es is ne private kleine Seite die nicht aus geschaeftlichen Gruenden auf Besucher angewiesen ist.
Nee, alles privat. :)
-
Grüße,
Ich hoffe allerdings, es is ne private kleine Seite die nicht aus geschaeftlichen Gruenden auf Besucher angewiesen ist.
omg - was machen facebook und google nur, die vergrauln ja all die IE6trottel - die gehen ja PLEITE! die Deppen muss man sofort warnen - schnell - zum Batmobil!
MFG
bleicher-
Om nah hoo pez nyeetz, bleicher!
omg - was machen facebook und google nur, die vergrauln ja all die IE6trottel - die gehen ja PLEITE! die Deppen muss man sofort warnen - schnell - zum Batmobil!
Das musst du aber mal ein wenig genauer darlegen.
Matthias
--
-
Grüße,
omg - was machen facebook und google nur, die vergrauln ja all die IE6trottel - die gehen ja PLEITE! die Deppen muss man sofort warnen - schnell - zum Batmobil!
Das musst du aber mal ein wenig genauer darlegen.
unterstützung für unterbrowser ie6 wurde von beiden aufgegeben, ie7 ist nicht nennenswert, ie8 sollte schon fast tolerabel sein was features unterstützung angeht.
MFG
bleicher-
Om nah hoo pez nyeetz, bleicher!
unterstützung für unterbrowser ie6 wurde von beiden aufgegeben, ie7 ist nicht nennenswert, ie8 sollte schon fast tolerabel sein was features unterstützung angeht.
Ursprünglich wurden alle IE-Nutzer begrüßt mit "Bitte verwenden Sie einen Webbrowser". Wenn man den IE nicht mag und diesen auch nicht unterstützen möchte, so sollte man seine Seitenbesucher dennoch nicht in diesem Ton begrüßen. Und weder facebook noch google tun das.
Matthias
--
-
Grüße,
Wenn man den IE nicht mag und diesen auch nicht unterstützen möchte, so sollte man seine Seitenbesucher dennoch nicht in diesem Ton begrüßen. Und weder facebook noch google tun das.
wenn du einen auf der straße mit platten rumrasen siehst, wirst du ihn wohl auch explizit anscheißen - ie nutzer sind eine gefahr für die allgemeinheit, über ie angesteckte rechner können für ddos und spamversand genutzt werden - somit betrifft die dummheit der ierasten jeden der mal spam kriegte. ergo ist es legal die als "komplizen aus dummheit" zu betrachten
MFG
bleicher
-
-
-
-
Grüße,
Ich hoffe allerdings, es is ne private kleine Seite die nicht aus geschaeftlichen Gruenden auf Besucher angewiesen ist.
omg - was machen facebook und google nur, die vergrauln ja all die IE6trottel - die gehen ja PLEITE! die Deppen muss man sofort warnen - schnell - zum Batmobil!
Ich betrachte mich selbst nicht unbedingt als Trottel, aber ja: sie vergraulen alle IE6 Trottel. Facebook ist nicht relvant, das ist Spielerei fuer Idioten (eine halbherzige Entschuldigung hier an alle die Facebook benutzen). Unsere Personalabteilung mag das betreffen, wenn es darum geht, neue Bewerber einzustellen, aber ich bezweifle, dass die Facebook nutzen. Google aber wird immer unbenutzbarer. Gerade google Maps, dass ich auf der Arbeit oft benoetige, ist teilweise unbenutzbar. Erst gestern war ich wieder auf der pure HTML Version. Mein Chef ist mittlerweile soweit, schon bing zu benutzen. Stell Dir vor er gewoehnt sich dran und ueberzeugt auch noch andere davon...
--
Ich bin dafuer verantwortlich was ich sage, nicht dafuer, was Du verstehst.
-
-
-
-
-
-
@@apsel:
nuqneH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Quirksmodus??
ul {display: inline-block;}
li:hover {color: red;}
a {color: black;}
li:hover a {color: black;}UI fail! Ein Hover-Effekt signalisiert dem Nutzer: hier kann er clicken, um eine Aktion (neue Seite) auszulösen. Befindet sich der Mauscursor innerhalb der li-Box, aber außerhalb der a-Box, ist der Hover-Effekt zu sehen, beim Click passiert aber nichts – schlecht.
Zwei Auswege aus dem Dilemma:
(1) Die a-Box so groß machen wie die li-Box:
li a { display: block }
Das ist aber kaum das, was man will.
oder
(2) Die li-Box so klein machen wie die a-Box (shrink to fit):
li { clear: left; float: left }Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
UI fail! Ein Hover-Effekt signalisiert dem Nutzer: hier kann er clicken, um eine Aktion (neue Seite) auszulösen. Befindet sich der Mauscursor innerhalb der li-Box, aber außerhalb der a-Box, ist der Hover-Effekt zu sehen, beim Click passiert aber nichts – schlecht.
Also zum Beispiel zwischen Aufzählungspunkt und Linktext.
Zwei Auswege aus dem Dilemma: (1) Die a-Box so groß machen wie die li-Box:
li a { display: block }Das ist aber kaum das, was man will. oder (2) Die li-Box so klein machen wie die a-Box (shrink to fit):li { clear: left; float: left }beide getestet im FF3.6 und beide bringen hinsichtlich des von dir aufgeworfenen Problems keine Änderung. Außerdem sollte man dem Nutzer auch zutrauen, die Form des Mauscursors im Auge zu behalten.
Matthias
--
-
@@apsel:
nuqneH
Also zum Beispiel zwischen Aufzählungspunkt und Linktext. […] beide bringen hinsichtlich des von dir aufgeworfenen Problems keine Änderung.
Ja, zwischen Aufzählungspunkt und Linktext nicht. Aber zumindest nach dem Linktext.
Außerdem sollte man dem Nutzer auch zutrauen, die Form des Mauscursors im Auge zu behalten.
Nein, wenn ein Hovereffekt vorhanden ist, ist dieser für den Nutzer maßgeblich – auch ohne Form des Mauscursors. Hovereffekt bei nicht clickbaren Bereichen ist eine Zumutung für den Nutzer.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
@@apsel:
nuqneH
Also zum Beispiel zwischen Aufzählungspunkt und Linktext. […] beide bringen hinsichtlich des von dir aufgeworfenen Problems keine Änderung.
Nichts, was sich nicht lösen ließe. Zusätzlich zur zweiten Variante noch
ul { list-style-position: inside; overflow: hidden } li a { margin-left: -1em; padding-left: 1em }('overflow: hidden' gehörte noch mit zur zweiten Variante dazu, damit nachfolgende Elemente nicht neben, sondern unter der Liste plaziert werden.)
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
li a { margin-left: -1em; padding-left: 1em }Passt.
Daran habe ich auch schon gedacht, aber noch keinen Antrieb gehabt, zu testen.
Matthias
--
-
-
-
-
-
