Почему не работает active css
Перейти к содержимому

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

  • автор:

Почему не работает псевдокласс active для отдельного нажатого пункта меню ?

Задача — заменить в меню текст на графические кнопки.
CMS — wordpress. Шаблон Fruitful.
В разделе Внешний вид — меню каждому пункту меню присвоил класс. Допустим menu-1.
В настройках шаблона есть раздел css куда можно прописывать свои настройки.
Вот код css для изменения стиля отдельного пункта меню:

.menu-1 a < background-image: url(mage/menu-1-1.png); background-size: 109px 30px; width: 110px; background-repeat: no-repeat; text-indent:-9999px; >.menu-1:active < background-image: url(image/menu-1-3.png); background-repeat: no-repeat; background-size: 109px 30px; text-indent:-9999px; >.menu-1:hover < background-image: url(image/menu-1-2.png); background-repeat: no-repeat; background-size: 109px 30px; text-indent:-9999px; >

Все работает, кроме active! (

В style.css есть класс который отвечает за общий стиль и наверное конфликтует\перекрывает active:

.main-navigation ul li.current-menu-item a

Ну и главный и вечный вопрос — что делать??

p.s. в css и php пока не силен, только учусь, поэтому и спрашиваю.
спасибо, надеюсь на помощь.

upd:
Есть почти решение:
.main-navigation ul .menu-1.current-menu-item a

Но здесь есть минус — если у кнопки три состояния и она активна то при наведении видно оба состоянии — и активного и при наведении.

  • Вопрос задан более трёх лет назад
  • 11370 просмотров

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

Использую полифилл js-focus-visible, чтобы разделить фокус от мыши и от клавиатуры, на одном из элементов проекта в качестве состояния :active применяется изменение цвета outline (по умолчанию задан прозрачным). Проблема в том, что по клику на элемент outline не окрашивается в нужный цвет, если задать его в devtools-все работает, если убрать класс, который добавляет полифилл к тегу html, тоже все работает

  • Вопрос задан более двух лет назад
  • 153 просмотра

: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.

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

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

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

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

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

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

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

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

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

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

Цитата:

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *