Hi, ich habe z.Z. folgende Navi aus einem Tut zusammengebastelt:
Navi aktuell
Style-Sheet:
HTML-Datei:
So in etwa soll meine Navi aussehen .. mit dem Unterschied, dass ich nicht nur einen beschreibenden Text zu einem Link zu haben, sondern in dem Feld das per Hover-Effekt auftaucht, sollen wieder weitere Links stehen.
Leider kann ich da ja nun nicht einfach weitere Links eintragen, da sich der span-Tag innerhalb der von a-href befindet.
Also müsste ich es hinbekommen, dass der span-Tag ausserhalb des a-href-Tags steht, aber trotzdem irgendwie auf den Hoverbefehl anspricht.
Alternativ dazu hatte ich einfach versucht folgendes zu machen:
Somit habe ich gehofft, dass sich der hover auf .info auswirkt, sobald man den Zeiger über .box3 bewegt. Das haut aber leider nicht hin.
Wie könnte ich das denn sonst lösen?!?
Navi aktuell
Style-Sheet:
Code:
.box3 { font-family:arial, verdana, sans-serif; font-weight:bold; width:150px; text-align:left;} .box3 a { color:#000000; background:#ece8d9; text-decoration:none; display:block; padding:0.4em; margin:0; border:1px solid black; width:10em;} .box3 a:hover { color:black; background:#e0d9bc; text-decoration:none; border:1px solid black;} .box3 a .info {display:none;} .box3 a:hover .info { color:black; background:#fafafa; font-weight:normal; border:1px solid black; display:block; padding:0.4em; font-size:0.9em;}
Code:
<div class="box3"> <a href="#">Toller Knopf<span class="info">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span></a> </div> <div class="box3"> <a href="#">Feiner Knopf<span class="info">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span></a> </div>
Leider kann ich da ja nun nicht einfach weitere Links eintragen, da sich der span-Tag innerhalb der von a-href befindet.
Also müsste ich es hinbekommen, dass der span-Tag ausserhalb des a-href-Tags steht, aber trotzdem irgendwie auf den Hoverbefehl anspricht.
Alternativ dazu hatte ich einfach versucht folgendes zu machen:
Code:
.box3 .info {display:none;} .box3 :hover .info { color:black; background:#fafafa; font-weight:normal; border:1px solid black; display:block; padding:0.4em; font-size:0.9em;} /*sprich, ich hab den a-Tag rausgelassen*/
Wie könnte ich das denn sonst lösen?!?
Kommentar