Почему не работает active css

Здесь могла бы быть ваша реклама

Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel

Помог: 3 раз(а)

Секрет
Теперь, когда вы уже наверняка второпях отправили свой запрос,
я расскажу вам простой секрет, который сэкономит вам уйму ожиданий,
даже если первый ответ по теме последуем сразу же.

Само собой я знаю что ответят мне тут же, и если я посмотрю
на сообщения на форуме, то пойму что в общем то я и не ошибаюсь.
Но еще я точно замечу, что очень мало тем, в которых всего два ответа :
вопрос автора и еще два сообщение вида Ответ + Спасибо

После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..

Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос — где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.

Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.

На последок как оно происходит на форумах

Цитата:

Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум — из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится — тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите — лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево — дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.

Отредактировано модератором: Uchkuma, 26 Апреля, 2011 — 10:21:12

:active

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

Пример

Скопировать ссылку «Пример» Скопировано

Сделаем объёмную кнопку, у которой будет меняться цвет фона и текста в активной фазе.

 button  padding: 2.5rem; border: 0; border-radius: 2.5rem; font-size: 2.5rem; background-color: #bada55; cursor: pointer; transition: background 0.3s, color 0.3s;> button:active  color: white; background-color: purple;> button  padding: 2.5rem; border: 0; border-radius: 2.5rem; font-size: 2.5rem; background-color: #bada55; cursor: pointer; transition: background 0.3s, color 0.3s; > button:active  color: white; background-color: purple; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

К любому селектору добавляем двоеточие и ключевое слово active .

Селектор по тегу в состоянии :active

Скопировать ссылку «Селектор по тегу в состоянии :active» Скопировано

 a:active  /* Стили */> a:active  /* Стили */ >

Селектор по классу в состоянии :active

Скопировать ссылку «Селектор по классу в состоянии :active» Скопировано

 .link:active  /* Стили */> .link:active  /* Стили */ >

Составной селектор в состоянии :active

Скопировать ссылку «Составной селектор в состоянии :active» Скопировано

 li .link:active  /* Стили */> li .link:active  /* Стили */ >

Селектор по id в состоянии :active

Скопировать ссылку «Селектор по id в состоянии :active» Скопировано

 #id:active  /* Стили */> #id:active  /* Стили */ >

Селектор по классу и его псевдоэлемент в состоянии :active

Скопировать ссылку «Селектор по классу и его псевдоэлемент в состоянии :active» Скопировано

 .link::before:active  /* Стили */> .link::before:active  /* Стили */ >

Как понять

Скопировать ссылку «Как понять» Скопировано

В момент нажатия на элемент при помощи кнопки мыши или клавиши клавиатуры этому самому элементу присваивается виртуальный класс :active , который можно стилизовать. За присвоение этого класса отвечает движок браузера, нам о самом процессе присвоения думать не нужно.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Смену стилей между состояниями можно анимировать при помощи transition ��

�� Часто, если дизайнер не позаботился об отрисовке состояния :active для кнопок, можно задать стили сразу и для наведения курсора и для активного состояния:

 button:hover,button:active  /* Стили */> button:hover, button:active  /* Стили */ >

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Дизайнеры и верстальщики почему-то часто забывают про тот короткий промежуток времени, когда пользователь нажал кнопку мыши, но ещё её не отпустил. И не стилизуют состояние :active . Но «дьявол кроется в деталях», и если в вашем интерфейсе будут продуманы даже такие небольшие элементы, то он будет создавать ощущение опрятности и заботы о пользователе.

�� Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link — :visited — :focus — :hover — :active .

Этот порядок легко запомнить в виде аббревиатуры LVFHA и мнемоники LoVe Fears HAte.

Почему не срабатывает псевдокласс :hover и :active к элементам меню?

Есть сайт, на котором есть Главное меню на синем фоне. Я не могу понять, почему не срабатывает псевдокласс :hover и :active к элементам меню. Мне нужно, чтобы при наведении мыши веcь квадрат li с пунктом меню подсвечивался цветом #8ad4f7. Какой CSS нужно описать для этого?

Отслеживать

11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков

задан 19 фев 2015 в 14:48

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

В вашем случае обращайтесь к li:hover a

Отслеживать

ответ дан 19 фев 2015 в 14:54

Дмитрий Клименко Дмитрий Клименко

760 3 3 серебряных знака 11 11 бронзовых знаков

@Дмитрий Клименко Написал, но ничего не происходит.

19 фев 2015 в 15:02

Заработало с !important

19 фев 2015 в 15:04

Тогда так, исходя из разметки, немного повысим специфичность li:hover >a

19 фев 2015 в 15:20

#top #header .av-main-nav > li > a < background-color: #0167B5; display: inline-block; font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 18px; >ul#avia-menu li a:hover

ul#avia-menu li a:hover

#top #header .av-main-nav > li > a:hover