Der Hintergrund und die Schriftfarbe der Registerkarten ändern sich beim Klicken ⇐ HTML

[Anonymous]

Ich habe einen Bereich mit Registerkarten auf meiner HTML-Seite. Die folgenden Änderungen müssen in der Aufgabe vorgenommen werden.

• Wenn Sie eine Registerkarte auswählen oder mit der Maus darüber fahren, Hintergrund – Weiß, Textfarbe – #6baed9, Rahmen – 1 Pixel, gleiche Farbe wie Text.
• Wenn die Registerkarte nicht ausgewählt ist (wenn eine andere Registerkarte ausgewählt ist, wird diese nicht ausgewählt) – Hintergrund – #6baed9, Textfarbe – Weiß, Rahmen – 1 Pixel, gleiche Farbe wie Text.

Mein CSS ist wie folgt:

Code: Select all

#my_settings ul.tab li a {
display: inline-block;
text-align: center;
padding: 8px 12px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
height:35px;
width:250px;
color: #6baed9;
}

#my_settings ul.tab li a:hover {
background-color: #fff;
color: #6baed9;
border: 1px solid #6baed9
}

#my_settings ul.tab li a:focus, .active {
background-color: #fff;
color: #6baed9;
border: 1px solid #6baed9
}

Probleme, die ich habe:

• In diesem Fall 2 oben kann ich die weiße Textfarbe nicht erhalten, wenn die Registerkarte nicht ausgewählt ist.
• Der Rand der ausgewählten Registerkarte ist in Ordnung, aber die untere Zeile wird nicht angezeigt. Warum ist das so?

Bitte helfen Sie Ich soll das tun.

PS: Wenn ich versuche, #my_settings ul.tab li a { in die Farbe : #fff zu ändern, funktioniert das einwandfrei. Aber wenn ich irgendwo auf der Seite klicke, wird die Farbe des ausgewählten Tabs (#6baed9) auf Weiß geändert.