1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. FAQ

Почему при клике (не при hover), исполняется стиль назначенный на active?

Главные вкладки

Аватар пользователя Mарат Mарат 7 июля 2009 в 21:11

Подскажите, почему при клике (не при hover), исполняется стиль назначенный на active? Получается некрасивая вешь, при клике на ссылку которой присвоен стиль .active font-weight:bold она становится жирной и текст находящийся в том же диве что и ссылка, из-за ее "несвоевременного ожирения" Smile скачет на странице. Как сделать что бы она становилась жирной только при нахождении УЖЕ! на странице куда эта ссылка привела.

Вот фрагмент из CSS где прописаны стили ссылок:

a {
  outline: none;
}
a:link {
  outline: none;
  text-decoration: underline;
}
a:visited {
  color:#92278F;
  outline: none;
}
a:hover {
  color:#CC0000;
  outline: none;
}
a:active {
  outline: none;
  text-decoration:none;
  font-weight:bold;
}

#sidebar-left li a.link {
  color:#5276C0;
}
#sidebar-left li a.visited {
  color:#92278F;
}
#sidebar-left li a.hover {
  color: #CC0000;
}
#sidebar-left li a.active {
  outline: none;
  color:#92278F;
  text-decoration:none;
  font-weight:bold;
}

#sidebar-right a {
  color:#0D0DC4;
  text-decoration:none;
}
#sidebar-right a.link {
  color:#0D0DC4;
  text-decoration:none;
}
#sidebar-right a.visited {
  color:#892286;
  text-decoration:none;
}
#sidebar-right a.hover {
  color: #A43A3A;
  text-decoration:none;
}
#sidebar-right a.active {
  color:#0D0DC4;
  text-decoration:none;
  font-weight:bold;
}

#submenu li a.link {
  color:#5276C0;
}
#submenu li a.visited {
  color:#92278F;
}
#submenu li a.hover {
  color: #CC0000;
}
#submenu li a.active {
  outline: none;
  color:#92278F;
  text-decoration:none;
  font-weight:bold;
}

Комментарии

Аватар пользователя volocuga volocuga 7 июля 2009 в 21:25

Во первых,не a.hover ,а a:hover

В том виде как у вас браузер читает <a class="hover">

outline? это что за хрень,слишком часто у вас применяется,имхо нездорово

#sidebar-left li a:hover {
  color: #CC0000;
  font-weight:normal;
}

Это должно помочь

Аватар пользователя Mарат Mарат 7 июля 2009 в 21:54

"volocuga" wrote:
Во первых,не a.hover ,а a:hover

Что то у меня намудрено, исправил на a: и ссылки стали становится bold только при клике на них, при нахождении же на странице, куда они привели, они становятся вновь normal.

Аватар пользователя volocuga volocuga 8 июля 2009 в 0:25

Такие вещи лучше смотреть плагином firebug,там показано какие стили действуют,какие не учитываются.Менять атрибуты можно на лету.Вполне может быть у вас конфликтят стили один с другим

Кстати,a:link,a:visited,a:active тоже с двумя крапочками

Аватар пользователя bogutski bogutski 8 июля 2009 в 0:33

при редактировании CSS или другого кода используйте специальный редактор с подсветкой. Иногда они показывают цветом ошибки.
Фаербаг +++

Аватар пользователя Mарат Mарат 8 июля 2009 в 1:14

"agent-000" wrote:
Фаербаг +++

у меня он есть, иначе вопросов было бы больше значительно.

а вопрос, это что за конструкция? (понятно не я ее создал)

li a.active {system-m...nus.css?2 (line 29)
color:#000000;
}

такие конструкции с a. не перекрыть своим стилем с a: и в css своей темы я и пишу, например:

li a.active {
color:#333333;
}
Аватар пользователя volocuga volocuga 8 июля 2009 в 2:05

"Mарат" wrote:
такие конструкции с a. не перекрыть своим стилем с a: и в css своей темы я и пишу, например:

Вы разберитесь с синтаксом сначала,это не php,всё не сложно

a.active описывает тег <a> т.е тег ссылки с классом active,
а a:active это вообще из другой оперы,активная ссылка,также как и а:hover

li a.active {system-m...nus.css?2 (line 29)

Означает,что в системном файле css предопределён чёрныё цвет для ссылок пунктов меню с классом .active

http://ru.html.net/tutorials/css/lesson6.asp