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

[Гость]

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

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

Мои 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
}

Issues I have :

• In this when is case 2 above, I cant get the white text color when tab is not selected.
• The border of the selected tab is fine but the bottom line is not showing.Why is that.

Please help me to do this.

PS : When I try to change

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

#my_settings ul.tab li a {

to

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

color : #fff

, works fine. But when I click somewhere in the page the selected tab's color(#6baed9) trun to white.[/b]


Источник: https://stackoverflow.com/questions/397 ... when-click