Autor |
Nachricht |
goodfellas84
Threadersteller
Dabei seit: 01.09.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 22.09.2009 11:05
Titel CSS - Problem mit Hover-Effekt |
|
|
Moin,
ich habe eine Problem mit einem Hover-Effekt. Es handelt sich um ein DropDown-Menü, in welchem nur der erste Button eine Hover-Grafik hat, da er ohne DropDown abgerundet ist und beim DropDown eckig werden soll (siehe Screenshots). Jetzt habe ich das Problem, dass wenn ich mit der Maus in Richtung nächsten Menüpunkt fahre, er mir den Hovereffekt von dem ersten Menüpunkt wieder wegnimmt. Klar.
Dieser Effekt soll aber für das komplette Dropdown-Menü beibehalten werden. Wie kann ich sowas am Besten lösen?
Hier die Screens:
Wenn ich mit der Maus auf "Unternehmen" bin, ist alles richtig, Unternehmen wechselt in die rechteckige Hover-Grafik:
Wenn ich mit der Maus dann auf "Portrait" gehe, dann wechselt "Unternehmen" wieder zurück in die runde Grafik:
Und hier mein CSS Quelltext für die ersten beiden Menüpunkte:
Code: |
#nav_top a.unternehmen{
background: url(../images/bi_unternehmen_button.png) no-repeat;
}
#nav_top a.unternehmen:hover {
background: url(../images/bi_unternehmen_button_square.png) no-repeat;
}
#nav_top a.portrait_portrait {
background: url(../images/bi_unternehmen_portrait.png) no-repeat;
}
|
Ich hoffe, dass mir jemand helfen kann.
Viele Grüße
goodfellas84
[Verschoben von Programmierung - HTML/CSS sind keine Programmiersprachen]
Zuletzt bearbeitet von Kash am Di 22.09.2009 11:32, insgesamt 1-mal bearbeitet
|
|
|
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Di 22.09.2009 11:19
Titel
|
|
|
Ist ja klar.. Wie soll sich das CSS denn merken was das Eltern Element ist ??
Weiß nicht ob das was overdosed ist, aber Google mal nach CSS Sprites ..
Oder vllt hilft da ein JQuery / MooTools Plugin
|
|
|
|
|
Anzeige
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 22.09.2009 11:32
Titel
|
|
|
Code: | #nav_top a:hover #nav_top a.unternehmen{
background: ...
} |
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 22.09.2009 12:05
Titel
|
|
|
Smooth-Graphics hat geschrieben: | Code: | #nav_top a:hover #nav_top a.unternehmen{
background: ...
} |
|
Ich glaube, da fehlt ein Komma
goodfellas, man lässt eine Subnavi ja erscheinen, indem man li hovert (der IE < 7 bekommt dafür per JS eine "echte" Klasse). Also kannst Du li auch eine bg-Grafik geben und diese beim Hovern ändern - genauso lange, wie das Submenü zu sehen ist.
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 22.09.2009 14:04
Titel
|
|
|
Nein, da fehlt kein Komma.
|
|
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Di 22.09.2009 14:19
Titel
|
|
|
Smooth-Graphics hat geschrieben: | Code: | #nav_top a:hover #nav_top a.unternehmen{
background: ...
} |
|
Was soll das bringen? Er wird doch (hoffentlich) nicht die Links der Unterpunkte in den Link des Hauptpunktes verschachtelt haben!
Wie sieht denn eigentlich der Quellcode der Navigation aus?
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 22.09.2009 14:23
Titel
|
|
|
Smooth-Graphics hat geschrieben: | Nein, da fehlt kein Komma. |
Aber diese Regel spricht folgende Struktur an:
Code: | <div id="nav_top">
<a href="#">
<div id="nav_top">
<a class="unternehmen" href="#">text</a>
</div>
</a>
</div> |
und das will ich nicht hoffen
top hat geschrieben: | Was soll das bringen? Er wird doch (hoffentlich) nicht die Links der Unterpunkte in den Link des Hauptpunktes verschachtelt haben! |
Meine Rede
Zuletzt bearbeitet von heiko_rs am Di 22.09.2009 14:24, insgesamt 1-mal bearbeitet
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 23.09.2009 08:48
Titel
|
|
|
hm... okay okay
|
|
|
|
|
|
|
|
Ähnliche Themen |
Problem mit CSS Hover Effekt
CSS Hover Effekt im IE
a:hover effekt
Flash CS3 - hover Effekt
hover-effekt bei text?
Hover Effekt bei Thumbnails
|
|