mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 27.04.2024 02:27 Benutzername: Passwort: Auto-Login

Thema: CSS - Problem mit Hover-Effekt vom 22.09.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS - Problem mit Hover-Effekt
Seite: 1, 2  Weiter
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

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
DerM

Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Di 22.09.2009 11:19
Titel

Antworten mit Zitat Zum Seitenanfang

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 * Keine Ahnung... *
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 22.09.2009 11:32
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
#nav_top a:hover #nav_top a.unternehmen{
  background: ...
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Di 22.09.2009 12:05
Titel

Antworten mit Zitat Zum Seitenanfang

Smooth-Graphics hat geschrieben:
Code:
#nav_top a:hover #nav_top a.unternehmen{
  background: ...
}

Ich glaube, da fehlt ein Komma *zwinker*

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.
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 22.09.2009 14:04
Titel

Antworten mit Zitat Zum Seitenanfang

Nein, da fehlt kein Komma. Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Di 22.09.2009 14:19
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Di 22.09.2009 14:23
Titel

Antworten mit Zitat Zum Seitenanfang

Smooth-Graphics hat geschrieben:
Nein, da fehlt kein Komma. Lächel

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 *zwinker*

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 *zwinker*


Zuletzt bearbeitet von heiko_rs am Di 22.09.2009 14:24, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 23.09.2009 08:48
Titel

Antworten mit Zitat Zum Seitenanfang

* Ich bin müde... * hm... okay okay *bäh*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.