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

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

  • автор:

: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:focus  /* Стили */> li .link:focus  /* Стили */ >      

Селектор по 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

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

Псевдокласс :active
Кто подскажет почему псевдокласс :active Не возвращается в начальное состояние при отпускание.

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

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

84 / 81 / 42
Регистрация: 20.01.2017
Сообщений: 219
стили для :active поставьте ниже стилей для ховера

Эксперт JSЭксперт HTML/CSS

3824 / 2674 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
И в 11й строке пропущена точка с запятой.
Регистрация: 07.05.2013
Сообщений: 194

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

И в 11й строке пропущена точка с запятой.
да, спасибо, но к сожалению, это проблемы не решает

Эксперт JSЭксперт HTML/CSS

3824 / 2674 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4

ЦитатаСообщение от angiks Посмотреть сообщение

это не помогает
C тем кодом, который вы привели — помогает. Очередность делаем такую:

1 2 3 4
a:hover{} a:hover:after{} a:active{} a:active:after{}

Чистим кэш и проверяем.
Регистрация: 07.05.2013
Сообщений: 194

стиль для active появляется почему-то только в момент нажатия на пункт меню, потом опять становится hover и после перехода на страницу опять активный пункт меню не подсвечивается

Добавлено через 1 минуту

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
div.k2CategoriesListBlock ul li a:hover{ color: #fff; background: #e31e24; border-bottom-color: #e31e24; transition: initial; -webkit-transition: initial; } div.k2CategoriesListBlock ul li a:hover:after { content: ''; position: absolute; top: 0px; right: -39px; border: 20px solid transparent; border-left: 20px solid #e31e24; border-top-color: transparent; border-bottom-color: transparent; } div.k2CategoriesListBlock ul li a:active { color: #fff; background: #323232; transition: initial; -webkit-transition: initial; } div.k2CategoriesListBlock ul li a:active:after { content: ''; position: absolute; top: 0px; right: -39px; border: 20px solid transparent; border-left: 20px solid #000; border-top-color: transparent; border-bottom-color: transparent; }

CSS :active не срабатывает при нажатии на кнопку

Не хочет нажиматься кнопка «Связаться» (анимироваться (:active)). Проблема скорее всего с использованием nav и div, но я в упор не пойму, где косяк. Заранее благодарен за понимание и подсказку.

body < font-family: 'K2D', sans-serif; >nav li < border: 2px solid #204156; border-radius: 15px; display: inline; float: right; margin: 20px; margin-top: 0px; padding: 5px; >.btn < background: #51d132; display: inline-block; padding: 0 60px; line-height: 40px; font-size: 20px; border-radius: 20px; cursor: pointer; border-bottom: 4px solid #1e5111; transition: .3s; >.btn:hover < background: #3daa22; >.btn:active

Отслеживать
задан 14 окт 2018 в 10:11
5 2 2 бронзовых знака

1 ответ 1

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

top, right, bottom, left работает только если у елемента заданно свойство position .

body < font-family: 'K2D', sans-serif; >nav li < border: 2px solid #204156; border-radius: 15px; display: inline; float: right; margin: 20px; margin-top: 0px; padding: 5px; >.btn < background: #51d132; display: inline-block; padding: 0 60px; line-height: 40px; font-size: 20px; border-radius: 20px; cursor: pointer; border-bottom: 4px solid #1e5111; transition: .3s; /**/ position: relative; >.btn:hover < background: #3daa22; >.btn:active

Отслеживать
ответ дан 14 окт 2018 в 10:17
4,906 3 3 золотых знака 17 17 серебряных знаков 37 37 бронзовых знаков

  • html
  • css
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

Синтаксис

Значения

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

    active   

Вычислить число оборотов двигателя в минуту

Дается: линейка, часы с секундной стрелкой, лист бумаги, нитка, карандаш, ножницы.

В данном примере задается цвет обычных, посещеных и активных ссылок. Результат примера показан на рис. 1.

Результат использования псевдокласса active

Рис. 1. Результат использования псевдокласса :active

CSS по теме

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

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