2012-03-11 3 views
2

Ok поэтому у меня есть следующее меню:Держите цвет пункта меню статичным по щелчку

<div class="header"> 
     <div id="logo"></div> 
     <ul class="menu"> 
      <li><a href="/index.aspx">Home</a></li> 
      <li><a href="/about.aspx">About</a></li> 
      <li><a href="/contact.aspx">Contact</a></li> 
     </ul> 
    </div> 

, связанные с этим CSS классом:

.header { 
    margin:20px 0 55px; 
    height:68px; 
    width:inherit; 
} 

Что я могу поставить в моем теге меню или мой CSS класс, чтобы сделать ссылку , не меняет цвета при нажатии. В настоящее время ссылка будет синей, но как только она будет нажата, она станет фиолетовой. Я хочу, чтобы он все время говорил «черный», щелкнул или нет.

ответ

5

Нет лучшего способа, чем процитировать спецификации:

a:link { color: red } /* unvisited links */ 
a:visited { color: blue } /* visited links */ 
a:hover { color: yellow } /* user hovers  */ 
a:active { color: lime } /* active links */ 
a:active { color: gray } /* when element accepts tab focus */ 

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

Так это должно охватывать все случаи:

.header a, 
.header a:link, 
.header a:visited, 
.header a:active, 
.header a:hover { 
    color: black; 
} 

http://jsfiddle.net/ZgUZn/1/

Йорг отметил в комментарии ниже вопрос, который я опустил :focus. Я сделал, и по причине, но отмечу, почему, и вы можете рассмотреть, если вам это нужно или нет:

.header a:focus { 
    color: white; 
    background: blue; 
    font-size: 2em; 
} 

http://jsfiddle.net/ZgUZn/5/

Перейти к этой ссылке, нажмите на белую часть страницы в нижней, правой четверти, затем нажмите клавишу TAB. Вы увидите, что когда этот элемент получает фокус, он изменяется. Вы можете охватить это, включив этот класс psuedo, но я понимаю, что браузеры не имеют настройки по умолчанию для этого, поэтому, если вы не установите его где-то еще, и вам нужно его отменить, то может быть ненужным.

Примечание: Кажется, я помню, в глубине моего сознания, я недавно узнал, что только .header a may also work, но если честно, я не знаю, как, и я всегда понимал, выше, как это должно быть сделано (несмотря на то, что ремни и подтяжки). Комментарии приветствуются по этому вопросу.

EDIT

Как примечание выше, я думаю, что я получил ответ:

a, 
a:link, 
a:visited, 
a:hover, 
a:active { 
    background: green; 
    color: white; 
    font-size: 2em; 
} 
.header a { 
    color: black; 
} 

http://jsfiddle.net/ZgUZn/6/

.header a не переопределяет все псевдопользователей-селекторов, если это они были объявлены в другом месте. Теперь, если нет других объявленных, это appears to work в переопределении настроек браузера по умолчанию, но это может быть ложноположительным.

+0

Вы забыли: а: фокус {цвет: серый;} – Joerg

+1

Обратите внимание, что активный всегда должен прийти после висения: http://meyerweb.com/eric/css/link-specificity.html –

+0

@AramKocharyan - Спасибо , Я обновил ответ. –

1

Это цвета по умолчанию, назначенные браузером для посещенных и незатронутых ссылок. Если вы не хотите, чтобы это изменилось, просто нарисуйте метки привязки.

.header a { 
    color: black; 
} 
+0

Как я уже отмечал в своем ответе, я думал, что это может быть ответ, но только если нет другого селектора, который мог бы предоставить эти псевдоселектора. См .: http://jsfiddle.net/ZgUZn/6/ –

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