активное состояние тега гиперссылки не работает - PullRequest
Новая
       10

активное состояние тега гиперссылки не работает

2 голосов
/ 26 июля 2010

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

это базовый пример -

HTML: 

             <ul>
                <li><a class="main" href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
                <li><a>Search</a></li>
                <li><a href="">RSS Feed</a></li>

             </ul>   

         </div>

CSS: 

#navigation ul li  a:hover, #navigation ul li  a:focus, #navigation ul li  a:active  {
                color: #FFF;        
                border: 1px solid #B20000;
                border-top: 2px solid #B20000;
                padding: 15px 6px 6px 6px;
                background: #660000;
                -moz-transition: color 1s ease; 
                -o-transition: color 1s ease; 
                -webkit-transition: color 1s ease; 
                transition: color 1s ease;      
                text-shadow: 0 0 0.2em #D5E3E7, 0 0 0.2em #D5E3E7;

        }

Ответы [ 3 ]

3 голосов
/ 26 июля 2010

Эффект отсутствует, поскольку вы используете одинаковые стили CSS для обоих состояний ссылок: 

a:hover
a:active

Вы должны установить разные стили CSS для них, чтобы увидеть изменения в стиле. Например: 

#navigation ul li a{
  color:#0000ff;
}

#navigation ul li a:hover{
  color:#ff0000;
}
2 голосов
/ 26 июля 2010

Чтобы достичь желаемого эффекта, вы должны передать переменную по сайту, содержащую значение активной ссылки, и при загрузке страницы извлечь переменную, сравнить с навигационными ссылками и, если они совпадают, применить активный класс или что-то еще.

Для css: активный используется для отображения ссылки, которая была нажата в тот момент, а не какая ссылка активна для сайта.

Может быть легко достигнуто с помощью серверных языков (например, PHP), но я не знаю, можно ли это сделать с помощью клиентских языков (например, JavaScript), если да, я бы хотел получить ответ об этом тоже.

0 голосов
/ 26 июля 2010

Да, вам нужен совершенно другой стиль для вашего зависания и активных состояний, чтобы увидеть любые изменения, попробуйте: 

a:hover { color: blue; text-decoration: underline; }
a:active { color: black; text-decoration: none; }

Это должно позволить вам увидеть, что происходит.

...