Hover Effekt

    Hi,
    ich weollte einen Hovereffekt erstellen welcher logischerweiße nur auftreten soll wenn ich den Cursor über (siehe Bild) "Startseite", "Artikel", ... bewege.


    [Blockierte Grafik: http://www.imagebanana.com/img/fjobfao/thumb/Unbenannt.png]


    Die Navigation ist eine Grafik auch die Trennstriche gehören dazu nun hab ich die Grafik zerteilt so das ich nur den Navibereich von "Startseite", "Artikel" ... habe da sich ja nur der Bereich immer ändern soll.


    Nur wenn ich das jetzt als "Hover" Befehl einfüge für die einzelnen Links wird nur der Bereich mit der Grafik belegt der die Schrift belegt aber er soll ja die ganze Höhe und Breite des Navigationsbereich des Links verändern und nicht nur der Schriftbereich (Siehe Bild unten).


    [Blockierte Grafik: http://www.imagebanana.com/img/e29c406n/thumb/Unbenannt123.png]







    So sieht es aus wenn ich denn "Hover" Befehl auf die Steuerung anwende.
    [Blockierte Grafik: http://www.imagebanana.com/img/uhnxfi3z/thumb/Unbenannt1234.png]


    So soll das aussehen, nur einzeln für die Links
    (Bsp. Cursor über "Startseite")


    [Blockierte Grafik: http://www.imagebanana.com/img/mns4sxx6/thumb/5.png]


    Hoffentlich ist es verständlich
    :D


    Funktioniert leider nicht wird wieder nur der Bereich hinter der Schrift verändert. Hab auch schon die Höhe und Breite der Grafik mit reingeschrieben bleibt aber auch wider nur der Schriftbereich. :cry:

    Hallo,


    Zitat

    Hab auch schon die Höhe und Breite der Grafik mit reingeschrieben bleibt aber auch wider nur der Schriftbereich.


    Natürlich, Inline-Elemente haben keine feste Breite oder Höhe.


    Laß mal das

    Code
    display: inline

    weg, vielleicht funktioniert es dann. Du brauchst es nur wenn Du eine hor. Navi willst.


    Mfg


    Starhunter

    Wenn ich inline wegmache dann sind meine Links untereinander anstatt nebeneinander.


    Ist aber immernoch der Textbereich der sich verändert :)


    Geht das so vielleicht gar nicht mit CSS sondern mit Java oder sonst sowas.

    Wo sollte das clear hin?


    Wenn ich es so mache wie im Code unten dann funktioniert es aber die Links verschieben sich dann (Startseite verschiebt sich nach links und der Rest nach rechts aber der Hover effekt funktioniert jetzt da wo er sein soll.
    [Blockierte Grafik: http://www.imagebanana.com/img/zolqs4/thumb/32.png]

    Nein nein.


    Von Anfang an floaten. d.h.


    Code
    #steuerung a {
display: block;
float: left;
width: xxx;
height: xxx;
}


    Code
    .n1 {
background: xxx;
}


    und dann hovern mit


    Code
    .n1:hover {
background: xxx;
}


    Das ganze könnte man allerdings noch wesentlich eleganter lösen als immer die gesamte Grafik auszutauschen, aber guck erstmal dass du es so hinkriegst :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden