2012-06-13 6 views
0

Я заканчиваю веб-сайт с кодом, частично выполненным фрилансером, который не выполнил задание. Я решил почти все проблемы, но я застрял в этом.Осталось при зависании при нажатии

Испытательный участок 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 остается белым, когда мы входим в страницу, если навести на него снова белый исчезает.

ответ

1

Вы можете изменить класс кнопки, основанный на событии DOM. Используя мой предпочтительный jQuery, я бы рекомендовал взглянуть на this.

+0

Большое спасибо за быстрый ответ Джереми, но я не очень разбираюсь в jQuery. Я даже зеленый в CSS, чтобы быть честным :) Кстати, я отредактировал тему. – user1453771

+0

Выполнение этого с помощью чистого CSS невозможно. CSS проверяет состояние, а не историю. Вам нужно прослушать событие (наведение мыши), а затем изменить состояние, чтобы оно не повернулось назад. jQuery предоставляет отличный способ сделать это, но есть и другие библиотеки, которые будут делать то же самое. –

+0

Еще раз спасибо Джереми. Мне нужно немного поиграть с jQuery :) – user1453771

0

Проблема находится в вашем JavaScript:

$(".text-top a,.menu-div a,.top-head a,.blog ul li a,.mapa a, input[type=button],input[type=submit]").live("mouseout", function() { 
    if(!$(this).hasClass('active')) { 
     $(this).stop(); 
     $(this).animate({ 
      opacity: 0.3 
     }); 
    } 
}); 

Он исчезает элемент на отведении указателя мыши, если этот конкретный элемент не имеет активный класс. Ваш сайт не применяет активный класс к языковым ссылкам ... он применяет активный класс к контейнеру <li>.

+0

Спасибо Стив! Как я могу применить активный класс к языковым ссылкам? Очевидно, что недостаточно

  • pt
  • . – user1453771

    +0

    Я решил это с помощью jQuery и финишировал существующий сценарий .js. Спасибо Стиву;) – user1453771

    Смежные вопросы