Псевдокласс active css не работает

Кроссбраузерные проблемы псевдокласса :active

С появлением множества нововведений в технологиях вёрстки веб страниц, у разработчиков появилась возможность отчасти заменить JavaScript, применяя HTML/CSS для большей производительности и расширяемости интерфейса своих порталов.
Помимо проблем с кроссбраузерностью и разной реализаций новых свойств CSS, часто приходится встречаться с другими проблемами в местах, где казалось бы, давно всё устаканилось и везде работает одинаково. Именно с такой проблемой мне пришлось столкнутся, применяя CSS transitions вместе с псевдоклассом :active. Видимо из-за того, что в документации отсутствует описание поведения родителей элемента в состоянии :active, в разных браузерных движках это поведение реализовано по-разному.

Задача

Прототип

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

В сферическом вакууме

В спецификации указано, что активным элементом (прим. div:active), является тот, на который производится клик, но ничего не сказано как наследуется активное состояние. Делаем эксперимент, и смотрим, как же в реальном мире, ведут себя активные элементы, ссылка на страницу с экспериментом на Jsfiddle (на dabblet).

Первые проблемы

В первом случае, в webkit, FF 3.6+ и opera мы видим, что активное состояние наследуется всеми родителями, вплоть до , но когда требуется отследить более 1ого активного элемента, опера уже не справляется, и активное состояние наследует только первый родитель в DOM, декорированный псевдоклассом :active (span:active)

В Interner Explorer активное состояние вообще не наследуется, и работает только при клике на элемент декорированный :active псевдокласом (в эксперименте это ), а в версиях до 7ого, включительно, :active работает только на ссылки.

Это еще не всё

Во втором случае я использовал каскад от активного элемента (span:active b), как видим в примере, webkit и ff, всё работает как и предполагалось, кликая на любой элемент вниз по DOM от декорированного псевдоклассом стиля, подсвечивается нужный элемент, определённый через каскад. Опера в этом случае начинает вести себя как IE, переставая наследовать активное состояние и работая только с элементом, на которые непосредственно происходит клик.

Оружие к бою

В третьем примере удалось заставить оперу наследовать активное состояние от потомка для использования в каскаде, используя абсолютно позиционированный элемент ( ), опирающийся от элемента декорированного псевдоклассом :active. FF и webkit тут по прежнему работают предсказуемо, но IE8+ до сих пор не при делах.

Что бы заставить работать IE как нам требуется, и улучшить немного код, заменяем абсолютный элемент псевдоэлементом. Как выяснилось, в IE активное состояние всё таки наследуется, но только на псевдоэлементы ::before, ::after. К сожалению, в IE8 псевдоэлементы игнорируют z-index, что может не подойти в большинстве случаев (как и в моём), но в IE9+ всё в порядке.

Миссия закончена, возвращаемся домой

В итоге, мы заставили все элементы одинакого наследовать активное состояние кроссбраузерно (IE9+, FF 3.6+, Opera 9.64+, Chrome, Safari и другие вебкиты) и теперь спокойно можем реализовать функционал на портале.
Так как функционал несёт чисто декоративную роль, мы решил отказаться от IE6-8, оставив им мягкий fallback, а остальное сделать на CSS.

Постскриптум.

Без каскада

Можно проще решить проблему в IE8 и Опере, отказавшись от каскада, что в моём случае не подходило, и снижало расширяемость функционала, поэтому решил отказаться от реализуемой красивости в IE8.

Пояснение к задаче

Единственный нормальный способ отслеживать клик на CSS, в моём примере, без использования Java Script, оказался псевдокласс :active. Можно было использовать :focus, подставляя элементы формы под существующие блоки, но такое решение много тяжелее по нагрузке, и в итоге всё равно требовало Java Script напильника.

Источник

На открытой странице не работает a:active

На открытой странице, не работает ul.menu li a:active

Комментарий модератора

На каждый вопрос создавайте по одной теме! (Правила п.4.4)

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Поиск на странице открытой в webbrowser
Всем привет! Пытаюсь организовать поиск на странице открытой в WebBrowser, вот нашел такой код: .

Подключение в открытой странице браузера
Здравствуйте, по работе возникла необходимость реализовать функцию поиска на внутреннем сайте по.

Подгрузить дополнительный скрипт js в уже открытой странице
Гуру, подскажите пожалуйста, такое вообще возможно. Страница создается на 90% динамически.

Получение кода уже открытой странице в браузере
Хочу написать библиотеку для вк, которая будет получить название играющего трека в данный момент. В.

Источник

Псевдокласс :active

Кто подскажет почему псевдокласс :active Не возвращается в начальное состояние при отпускание кнопки мыши в ie 6 и 7. На сайте htmlbook пишут что класс полностью рабочий, но в ие 6 и 7 при отпускание не хочет возвращаться на место.

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Не работает псевдокласс :active
подскажите что делаю ни так. Есть класс меню div.k2CategoriesListBlock ul li a < position.

Не работает псевдокласс active у ссылки
Всем привет) и с наступающим НГ! переделываю дизайн шаблона WP и столкнулась с проблемой :swoon.

Псевдокласс :hover
Надо изменить атрибуты одного div’a при наведение на другой. Написал так: .

Псевдокласс hover
Доброго времени суток! Есть два класса(main,subclass), мне нужно что бы при наведении на main.

я конечно понимаю что это все индивидуально, но все таки спрошу, а зачем вам IE 6 и 7 ? вам заказчик поставил такие условия ? просто на данный момент минимум на что обращают внимание это начиная с IE 8, а то и 10(кто как)

как по мне — это мазохизм под 6ку в данное время что то делать ))

Evgeniy55, Вы или помогаете, или проходите мимо. Если ТС хочет сделать поодержку ie6, это его право, и это круто. А если вы в своих проектах даже ie9 не поддерживаете, то мазохистами становятся ваши пользователи, которые по какой-либо причине вынуждены ходить в интернет со старого браузера.
Мы с вами уже не раз поднимали эту тему. Если будете продолжать рассказывать про бессмысленность поддержки старых браузеров, если тема не касается данного вопроса, это будет засчитываться вам как троллинг.

allkapone, попробуйте проверить в реальном ie, запустив виртуальную машину, в не в IEtester’e
И еще попробуйте вариант с обработкой события onblur

А атрибут onblur в ссылки как прописать нужно, чтобы пропал эфект нажатия?

Добавлено через 1 минуту
Пробывал посмотреть в реальном браузере, посмотрел в ie7 тоже самое показывает

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

Псевдокласс :target
Доброго времени суток, уважаемые форумчане. У меня вопрос по псевдоклассу :target. Вот мой код на.

Псевдокласс ховер
Здравствуйте. Возникла некоторая проблема с элементом hover, не желает давать объекту, до этого.

Псевдокласс :link
Добрый день, прочитал в спецификации про этот псевдокласс css. Я так понял что смысл такой же как и.

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

псевдокласс clear:both;
Немного не понимаю как работают псевдоклассы, никогда ранее не пользовался ими из за.

Источник

: активный псевдокласс не работает в мобильном сафари

В Webkit на iPhone/iPad/iPod задание стиля для: активного псевдокласса для тега не срабатывает при нажатии на элемент. Как я могу заставить это вызвать? Пример кода:

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

Как уже говорилось в других ответах, iOS Safari не вызывает псевдокласс :active если к элементу не присоединено событие касания, но пока это поведение было “волшебным”. Я наткнулся на эту маленькую рекламу в Библиотеке разработчиков Safari, которая объясняет это (выделение мое):

Вы также можете использовать CSS-свойство -webkit-tap-highlight-color в сочетании с установкой события касания, чтобы настроить кнопки на поведение, аналогичное рабочему столу. На iOS события мыши отправляются так быстро, что неактивное или активное состояние никогда не принимается. Следовательно, псевдо-состояние :active запускается только в том случае, если для элемента HTML установлено событие касания, например, когда для элемента установлено ontouchstart следующим образом:

Теперь, когда кнопка нажата и удерживается в iOS, кнопка меняется на указанный цвет без появления прозрачного серого цвета.

Другими словами, установка события ontouchstart (даже если оно пустое) явно указывает браузеру реагировать на сенсорные события.

На мой взгляд, это некорректное поведение, и, вероятно, оно восходит к тому времени, когда “мобильная” сеть вообще отсутствовала (посмотрите на эти скриншоты на связанной странице, чтобы понять, что я имею в виду), и все было ориентировано на мышь. Интересно отметить, что другие, более новые мобильные браузеры, такие как на Android, отображают псевдо-состояние “: active” на ощупь очень хорошо, без каких-либо взломов, подобных тому, что требуется для iOS.

(Примечание: если вы хотите использовать свои собственные стили в iOS, вы также можете отключить серое полупрозрачное поле по умолчанию, которое iOS использует вместо псевдо-состояния :active с помощью -webkit-tap-highlight-color свойство, как объяснено на той же связанной странице выше.)

После некоторых экспериментов ожидаемое решение установки события ontouchstart элемента которому затем ontouchstart все события касания, не работает полностью. Если элемент отображается в окне просмотра при загрузке страницы, то он работает нормально, но прокрутка вниз и касание элемента, который был вне области просмотра, не вызывает псевдо-состояние :active как это должно быть. Итак, вместо

прикрепить событие ко всем элементам вместо того, чтобы полагаться на событие, всплывающее в теле (используя jQuery):

Тем не менее, я не знаю о последствиях для производительности, так что будьте осторожны.

РЕДАКТИРОВАТЬ: У этого решения есть один серьезный недостаток: даже прикосновение к элементу при прокрутке страницы активирует псевдо-состояние :active . Чувствительность слишком сильная. Android решает эту проблему, вводя очень небольшую задержку перед отображением состояния, которая отменяется при прокрутке страницы. В свете этого я предлагаю использовать это только для отдельных элементов. В моем случае я разрабатываю веб-приложение для использования в полевых условиях, которое представляет собой список кнопок для навигации по страницам и отправки действий. Так как в некоторых случаях вся страница содержит много кнопок, у меня это не сработает. Однако вы можете установить псевдо-состояние :hover чтобы заполнить его вместо этого. После отключения стандартного серого поля это работает отлично.

Добавить обработчик событий для ontouchstart в тэге . Это заставляет CSS работать магически.

Это работает для меня:

Примечание. Если вы сделаете этот трюк, то также стоит удалить цвет по умолчанию, выделенный касанием. Приложение Mobile Safari применяется с использованием следующего правила CSS.

По состоянию на 8 декабря 2016 года принятый ответ ( .

Источник

Псевдокласс active css не работает

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

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

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

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

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

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

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

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

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

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

Источник