Я заканчиваю веб-сайт с кодом, частично выполненным фрилансером, который не выполнил задание. Я решил почти все проблемы, но я застрял в этом.Осталось при зависании при нажатии
Испытательный участок here.
Я хочу, чтобы кнопки наверху (PT-EN) оставались в состоянии зависания (белый) в зависимости от того, на каком языковом сайте мы находимся. Точно так же элементы меню навигации остаются белыми при выборе.
Заранее благодарен!
EDIT:
Что я пытаюсь сделать, это в основном дублировать то, что его сделали в меню навигации, которая заключается в следующем:
HTML говорит:
<div class="fright text">
<ul>
<li class="active"><a href="baga.html">baga</a></li>
<li><a href="portfolio_thumbnai.html"> portfolio</a></li>
</ul>
<ul>
<li><a href="clientes.html">clientes</a></li>
<li><a href="contactors.html"> contactos</a></li>
<li><a href="news.html"> news</a></li>
</ul>
</div>
CSS говорит:
.head .text{
text-transform:uppercase;
padding-top: 72px;
font-size: 25px;
text-align:right;
margin-right:-1px;
line-height:26px;
}
.head .text ul{
padding:0px;
margin-top:-5px
}
.head .text ul li{
display:inline;
}
.head .text ul li a{
text-decoration:none;
color: #fff;
opacity: 0.3;
font-family: DIN-Light;
-webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
}
.head .text ul li.active a{
color:#fff;
}
Что в настоящее время сделано для верхних кнопок:
HTML
<div class="top-head">
<ul>
<li class="active"><a href="#">pt</a></li>
<li> - <a href="en/index.html">en</a></li>
</ul>
</div>
CSS
.top-head{
text-align:right;
text-transform:uppercase;
padding-top:20px;
font-size:11px;
font-family: DIN-Light;
-webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
}
.top-head ul li{
display:inline;
}
.top-head ul li a{
text-decoration:none;
color: #fff;
opacity: 0.3;
font-family: DIN-Light;
-webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
}
.top-head ul li.active a{
color:#fff;
opacity: 1;
}
В результате, хотя кнопка PT остается белым, когда мы входим в страницу, если навести на него снова белый исчезает.
Большое спасибо за быстрый ответ Джереми, но я не очень разбираюсь в jQuery. Я даже зеленый в CSS, чтобы быть честным :) Кстати, я отредактировал тему. – user1453771
Выполнение этого с помощью чистого CSS невозможно. CSS проверяет состояние, а не историю. Вам нужно прослушать событие (наведение мыши), а затем изменить состояние, чтобы оно не повернулось назад. jQuery предоставляет отличный способ сделать это, но есть и другие библиотеки, которые будут делать то же самое. –
Еще раз спасибо Джереми. Мне нужно немного поиграть с jQuery :) – user1453771