Abgerundete CSS Tabs

Question

Ich habe einige abgerundete Navigation Tabs mit CSS erstellt und Probleme habe, wenn implementingn hover.

Zum einen ist hier ein Link zu der Website Tabs , da es recht ist schwer zu erklären. Bitte, schweben über die linke Seite der Registerkarten mein Problem zu verstehen. Ich habe im Folgenden erläutert.

Ich habe ein Bild Hintergrund auf #navigation li Elemente dieses enthält die linke Seite Ecke, und ich habe dann ein zweites Hintergrundbild (die rechte Ecke) dies wird durch Verwendung von #navigation a.

Allerdings, wenn ich über die linke Seite der Registerkarte schweben, nur ein kleines Stück Hintergrund dargestellt ist, nehme ich dies, weil nur der li Bereich über schwebte wird. Offensichtlich würde ich das ganze Register möchte hervorheben, wie es tut, wenn Sie über den Rest davon schweben.

Das war ziemlich schwer zu erklären, so dass, wenn Sie uns brauchen, in Frage zu stellen weiter das Problem zu verstehen, bitte.

Answer 1

Paar Dinge:

Lösen Sie das Problem durch die Polsterung aus dem

zu nehmen und sie zurück auf das Kind setzen -. Der Raum, den sie braucht besetzen die gleiche zu sein die Hover zu erhalten auszurichten

Jetzt haben Sie ein anderes Problem haben, wird die linke Ecke nicht zeigen. Dieses Problem beheben, indem die Hintergrundfarbe für die a und a:hover gleich anstelle der Farben transparent -. Jetzt die

durchscheinen kann

Schließlich empfehle ich Sie, das Verhalten ändern von ganz, mit einer anderen Hintergrund-Position auf das gleiche Bild ein anderes Bild zu sein, so dass die Rolllasten unsichtbar.

edit: CSS-Rollover ohne Bild Swap beschrieben hier

Answer 2

Mit jQuery ist es super einfach! Sie können aber auch versuchen, skalierbare Feld:

http: //www.usabilitypost.com/2008/11/27/scalable-content-box-using-only-one-background-image/

und dann das Hintergrundbild auf schweben ändern.

Answer 3

Oder Sie können Ihre li ersetzen: schweben und a: schweben mit diesen:

#navigation li:hover {
        background: #009BDA url(images/tab_left_on.gif) no-repeat top left;
        cursor : pointer;
        }

#navigation li:hover a {
        background: #009BDA url(images/tab_right_on.gif) no-repeat top right;
        color: #FFF;
}

Beachten Sie, dass es möglicherweise IE6 nicht funktionieren.