nicht angemeldet
Zeichen (>>) vor Link bei Mouse over
Hi
ich hab eine Problem mit der Gestaltung meines Menüs für meine Homepage.
Ich hab hier verschiedene Links im Menü und ich will das VOR diesen Links bei Mouse Over die zeichen >> erscheinen um anzuzeigen auf welchem link man ist. Ist dies irgenwie mit css möglich (a:hover ....)
Wäre nett wenn mir jemand helfen könnte
Stefan Jäger
-
Hi
ich hab eine Problem mit der Gestaltung meines Menüs für meine Homepage.
Ich hab hier verschiedene Links im Menü und ich will das VOR diesen Links bei Mouse Over die zeichen >> erscheinen um anzuzeigen auf welchem link man ist. Ist dies irgenwie mit css möglich (a:hover ....)An sowas bastle ich grade. In leichter Abwandlung und mit Herzlichem Dank von/an:
http://aktuell.de.selfhtml.org/tippstricks/css/infobox/index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
.mol {position:relative;}
.mol a {display:block; text-decoration:none; color:#003031; font-family:VERDANA,ARIAL,HELVETICA; font-size:1em;}
.mol a:visited {color:#007173;}
.mol a:hover {color:#00AEAD;}
.mol a:active {color:#003031;}
.mol a .akt {visibility:hidden;}
.mol a:hover .akt {visibility:visible;}
-->
</style>
</head>
<body>
<div class="mol">
<a href="#"><span class="akt">>></span>Linktext</a>
</div>
<div class="mol">
<a href="#"><span class="akt">>></span>Linktext</a>
</div>
<div class="mol">
<a href="#"><span class="akt">>></span>Linktext</a>
</div>
</body>
</html>Gruß
Axel
PS: Opera 6.06 kann es nicht. NN4.x = ungetestet
-
Hi
PS: Opera 6.06 kann es nicht. NN4.x = ungetestet
Ich habs grad noch mal mit der neuen Opera 7 beta getestet, da funktioniert es jetzt auch (anders als im 6.06) :-)
Nochmal thx für die schnelle Anwort
Stefan Jäger -
Hallo, Axel,
ich hab eine Problem mit der Gestaltung meines Menüs für meine Homepage.
Ich hab hier verschiedene Links im Menü und ich will das VOR diesen Links bei Mouse Over die zeichen >> erscheinen um anzuzeigen auf welchem link man ist..mol {position:relative;}
Wozu ist das nötig...? (Eine reine Frage.)
.mol a {display:block; text-decoration:none; color:#003031; font-family:VERDANA,ARIAL,HELVETICA; font-size:1em;}
Mit display:block würde ich vorsichtig sein, das ist eine mögliche Fehlerquelle. Beispielsweise auf IE5.5 Mac kann das Probleme machen, habe ich mir sagen lassen, vor allem wenn absolute Positionierung dazukommt (position:relative ist auch ein weiterer Faktor).
.mol a .akt {visibility:hidden;}
.mol a:hover .akt {visibility:visible;}Ich würde es mit Farben lösen, getreu nach keep it simple and stupid.
Mein Vorschlag sähe folgendermaßen aus:
http://home.t-online.de/home/dj5nu/fanhost/css-mouseover-effekte-menue.htmlAls Hintergrundfarbe ist jeweils background-color:transparent einzufügen, falls gewünscht; die Farben sind natürlich nur Beispiele...
Grüße,
Mathias--
"Die größten Kritiker der Elche waren früher selber welche"
(Prof. Fritz Weigle alias F. W. Bernstein)
Stimme für eine Übergangslösung für Benutzerstylesheets!
http://cforum.teamone.de/phpbt/bug.php?op=show&bugid=36 Vote NOW! ;)-
Hallo Mathias,
.mol {position:relative;}
Wozu ist das nötig...? (Eine reine Frage.)...ist von meiner eigentlichen Absicht übrig geblieben (siehe unten)
Hier brauche ich die position-Angabe, damit der DIV überhaupt als Container akzeptiert wird. Ohne positioniert sich das Bild im Body..mol a {display:block; text-decoration:none; color:#003031; font-family:VERDANA,ARIAL,HELVETICA; font-size:1em;}
Mit display:block würde ich vorsichtig sein,
...ebenso ein Überbleibsel von (siehe unten)
Ohne display:block wird im Netscape 6.x die Position des Bildes bei hover nicht verändert. Im IE schon.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
.mol {position:relative;}
.mol a {display:block; height:16px; text-decoration:none; color:#003031; padding-left:40px; font-family:VERDANA,ARIAL,HELVETICA; font-size:1em;}
.mol a:visited {color:#007173;}
.mol a:hover {color:#00AEAD; padding-left:41px;}
.mol a:active {color:#003031;}
.mol a .lbild {position:absolute; left:0; top:0;}
.mol a:hover .lbild {position:absolute; left:20px; top:0;}
-->
</style>
</head>
<body>
<div class="mol">
<a href="#"><img class="lbild" src="lbild.gif" alt="B" width="16" height="16" border="0"/>Linktext</a>
</div>
<div class="mol">
<a href="#"><img class="lbild" src="lbild.gif" alt="B" width="16" height="16" border="0"/>Linktext länger</a>
</div>
<div class="mol">
<a href="#"><img class="lbild" src="lbild.gif" alt="B" width="16" height="16" border="0"/>Linktext</a>
</div>
</body>
</html>Weitere Erklärungen:
Ohne die height-Angabe beim a kann der IE5.5 nichts mit dem display:block anfangen und positioniert das Bild nicht absolut. Irgendeine Breiten-Angabe geht auch.Ohne eine Änderung bei a:hover (Schriftstil, Schriftgröße oder Position) wird beim IE5.5 die :hover .lbild nicht ausgelöst. Eine Änderung der Text-Farbe reicht nicht, wohl aber die Änderunge der Hintergrundfarbe.
Verbesserungsvorschläge sind auch hierfür willkommen ;-))
Gruß
Axel
-
also dein vorschlag is auch recht gut, wahrscheinlich sogar besser für mich geeignet. auf jeden fall danke dafür
mfg
Stefan JägerHallo, Axel,
ich hab eine Problem mit der Gestaltung meines Menüs für meine Homepage.
Mein Vorschlag sähe folgendermaßen aus:
http://home.t-online.de/home/dj5nu/fanhost/css-mouseover-effekte-menue.htmlAls Hintergrundfarbe ist jeweils background-color:transparent einzufügen, falls gewünscht; die Farben sind natürlich nur Beispiele...
Grüße,
Mathias
-
-
-
Hi, Stefan,
Ich hab hier verschiedene Links im Menü und ich will das VOR diesen Links bei Mouse Over die zeichen >> erscheinen um anzuzeigen auf welchem link man ist.
Ist dies irgenwie mit css möglich (a:hover ....)
So wie Du dir das vorstellst vermutlich nicht . Hier eine Idee mit Hintergrundbild (ungetestet):
a:focus:hover{background: url(img/menuarrows.gif) no-repeat;}
Ansonsten würde ich es einfach mit einem JavaScript-MouseOver-Effekt wie auf der Spiegel-Seite versuchen:
Grüße,
Sebastian