Не работает псевдокласс :active

@angiks · Регистрация: 07.05.2013

Студворк — интернет-сервис помощи студентам

подскажите что делаю ни так. Есть класс меню

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
div.k2CategoriesListBlock ul li a {
   position: relative;
    display: block;
    padding: 0.9em;
    color: #1e1e1e;
    font-size: 1.2rem;
    font-weight: 300;
    border-top: none;
    text-transform: uppercase;
    min-height: 40px;
    line-height: 1.5em;
    transition: initial;
    -webkit-transition: initial;
}

создаю для наведения и активного

CSS
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
div.k2CategoriesListBlock ul li a:active {
    color: #fff;
    background: #323232;
}
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;
 
}
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;
}

для hover все срабатывает как нужно, а active не работает и все тут
где косяк?

@SergioSup · 14.06.2017, 20:07

стили для :active поставьте ниже стилей для ховера

@mrtoxas · 14.06.2017, 20:25

И в 11й строке пропущена точка с запятой.

@angiks · 14.06.2017, 21:22 **[ТС]**

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

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

@mrtoxas · 14.06.2017, 21:29

Сообщение от angiks

это не помогает

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

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

Чистим кэш и проверяем.

@angiks · 14.06.2017, 21:31 **[ТС]**

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

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

CSS
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;
 
}

так оно и стоит, кеш чищу каждый раз после сохранения файла

@mrtoxas · 14.06.2017, 21:36

angiks, псевдокласс active так и работает. Стили применяются только в момент нажатия на ссылку. А чтобы сделать то, что вы хотите, надо назначать актуальной ссылке класс. Это делается или на стороне сервера, или при помощи js.

@angiks · 14.06.2017, 21:44 **[ТС]**

как должен выглядеть этот класс?
как сделано это тут? https://www.elizaspb.ru/shkafy... kafy-kupe/ (меню ШКАФЫ ПО ВИДУ) разве не псевдоклассом?

@mrtoxas · 14.06.2017, 21:55

Нет не пседоклассом. По ссылке, активному(актуальному) пункту меню назначается класс current-menu-item с определенными стилями. Это делается при формировании страницы на сервере.

@angiks · 14.06.2017, 22:40 **[ТС]**

А как стили этого класса должны выглядеть?
У меня там прописано:

HTML5
1
<li class="item-912 current active">

если я просто назначу

CSS
1
2
3
4
.current {
    color: #fff;
    background: #323232;
    border-bottom-color: #323232;}

Это ж мне ни чего не даст.

@mrtoxas · 14.06.2017, 23:15

Если так, "в лоб", то скорее всего ничего не даст. Берем на примере вышепреведенной ссыли. Код должен быть, например, такого плана:

CSS
1
2
3
4
.menu-item{}
.menu-item:after{}
.menu-item.current-menu-item{}
.menu-item.current-menu-item:after{}

Но возможны разные вариации, пробуйте.

@angiks · 14.06.2017, 23:32 **[ТС]**

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div.k2CategoriesListBlock .current a{
    color: #fff;
    background: #323232;
}
div.k2CategoriesListBlock .current a:after {
    content: '';
    position: absolute;
    top: 0px;
    right: -39px;
    border: 20px solid transparent; 
    border-left: 20px solid #323232;
    border-top-color: transparent;
    border-bottom-color: transparent;
 
}

вот так правильно

@mrtoxas · 14.06.2017, 23:35

Вот, набросал, разбирайтесь c идеей:

HTML5
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .link {
      position: relative;
      display: block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      color: #1e1e1e;
      padding: 0 20px;
    }
    .link.current {
      background-color: green;
    }
    .link.current:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 100%;
      border: 15px solid transparent;
      border-left: 20px solid green;
      border-top-color: transparent;
      border-bottom-color: transparent;
    }
    
    .link:hover {
      color: #fff;
      background: #e31e24;
    }
    .link:hover:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 100%;
      border: 15px solid transparent;
      border-left: 20px solid #e31e24;
      border-top-color: transparent;
      border-bottom-color: transparent;
    }
    .link.active:hover {
      background-color: blue;
    }
    
    .link.active:hover:after {
      border-left: 20px solid blue;
    }
  </style>
</head>
<body>
  <a href="#" class="link">item</a>
  <a href="#" class="link active">item</a>
  <a href="#" class="link current">item</a>
</body>
</html>

@angiks · 14.06.2017, 23:40 **[ТС]**

спасибо. уже разобралась. все работает

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

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

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	14.06.2017, 20:25
	И в 11й строке пропущена точка с запятой. 0

@angiks 0 / 0 / 1 Регистрация: 07.05.2013 Сообщений: 195
	14.06.2017, 21:22 [ТС]
	стили для :active поставьте ниже стилей для ховера это не помогает, они как раз изначально стояли выше. И в 11й строке пропущена точка с запятой. да, спасибо, но к сожалению, это проблемы не решает 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	14.06.2017, 21:36
	angiks, псевдокласс active так и работает. Стили применяются только в момент нажатия на ссылку. А чтобы сделать то, что вы хотите, надо назначать актуальной ссылке класс. Это делается или на стороне сервера, или при помощи js. 0

@angiks 0 / 0 / 1 Регистрация: 07.05.2013 Сообщений: 195
	14.06.2017, 21:44 [ТС]
	как должен выглядеть этот класс? как сделано это тут? https://www.elizaspb.ru/shkafy... kafy-kupe/ (меню ШКАФЫ ПО ВИДУ) разве не псевдоклассом? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	14.06.2017, 21:55
	Нет не пседоклассом. По ссылке, активному(актуальному) пункту меню назначается класс `current-menu-item` с определенными стилями. Это делается при формировании страницы на сервере. 0

@angiks 0 / 0 / 1 Регистрация: 07.05.2013 Сообщений: 195
	14.06.2017, 23:40 [ТС]
	спасибо. уже разобралась. все работает 0