Цвет фона и шрифта вкладок меняется при нажатии ⇐ Html

[Anonymous]

На моей HTML-странице есть панель с вкладками. В задаче необходимо внести следующие изменения.

• При выборе вкладки или наведении курсора мыши фон — белый, цвет текста — #6baed9, граница — 1 пиксель того же цвета, что и текст.
• Когда вкладка не выбрана (если выбрана другая вкладка, она становится невыделенной) — фон — #6baed9, цвет текста — белый, рамка — 1 пиксель того же цвета, что и текст. text.

Мои CSS следующие:

Код: Выделить всё

#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
}

Проблемы, которые у меня возникли:

• В этом случае, когда описан выше случай 2, я не могу получить белый цвет текста, когда вкладка не выбрана.
• Граница выбранной вкладки в порядке, но нижняя строка не отображается. Почему.

Пожалуйста, помогите мне для этого.

PS: Когда я пытаюсь изменить #my_settings ul.tab li a { на color : #fff, все работает нормально. Но когда я нажимаю где-нибудь на странице, цвет выбранной вкладки (#6baed9) становится белым.

Подробнее здесь: https://stackoverflow.com/questions/397 ... when-click