Div:active кнопка не фиксируется в нажатом состоянии

@4ecHok · Регистрация: 06.12.2013

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

Вот код

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="container">
  <div class="button">
   <a href="#">Нажми!</a>
    <ul>
      <li><a href="#">Сцылко1</a></li>
      <li><a href="#">Сцылко2</a></li>
      <li><a href="#">Сцылко3</a></li>
      <li><a href="#">Сцылко4</a></li>
    </ul>
  </div>
</div>

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
*{
  padding:0;
  margin:0;
}
a{
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,1);
  font-weight:bold;
  text-decoration:none;
}
#container{
  width:90%;
  background:#deffad;
  margin:10px auto;
  padding:20px;
  box-shadow:0 0 10px 2px rgba(0,0,0,0.5);
}
.button{
  margin:auto;
  padding-top:10px;
  text-align:center;
  width:80px;
  height:40px;
  border:outset 2px #c8bd08;
  box-shadow:0 4px 10px 1px rgba(0,0,0,0.6);
  border-radius:8px;
  background: -moz-linear-gradient(#fff884, #c8bd08);
  background: -ms-linear-gradient(#fff884, #c8bd08);
  background: -o-linear-gradient(#fff884, #c8bd08);
  background: -webkit-linear-gradient(#fff884, #c8bd08);
}
.button:hover{
  background:#fff884;
}
.button:active{
  background:#c8bd08;
  border:inset 2px #c8bd08;
  box-shadow:none;
}
.button>ul{
border:outset 2px #c8bd08;
border-radius:8px;
width:120px;
background:#c8bd08;
list-style:none;
box-shadow:0 4px 10px 1px gba(0,0,0,0.6);
position:relative;
top:24px;
right:40px;
display:none;
}
.button>ul>li{
  margin:6px 0;
}
.button>ul>li a{
  text-align:center;
  text-decoration:none;
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,1);
  font-weight:bold;
}
.button:active>ul{
  display:block;
}

А вот результат с кодом в конструкторе:
http://codepen.io/anon/pen/jFExA

Что не так делаю? Если кто не понял-нужно,чтобы при нажатии кнопка оставалась нажатой ,как и вылезающее из нее меню.

@almaz1994 · 14.05.2014, 18:03

Ну здесь не так идет active
Ссылка активная - когда на нее нажали. Отпустили - неактивная.

Используйте a:visited

Но тут возникает проблема, что при обновлении страницы он останется в таком же состоянии.

Я бы копал в сторону JS

@4ecHok · 15.05.2014, 13:43 **[ТС]**

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

Ну здесь не так идет active
Ссылка активная - когда на нее нажали. Отпустили - неактивная.
Используйте a:visited
Но тут возникает проблема, что при обновлении страницы он останется в таком же состоянии.
Я бы копал в сторону JS

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

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@almaz1994 33 / 33 / 15 Регистрация: 07.05.2014 Сообщений: 313
	14.05.2014, 18:03
	Ну здесь не так идет active Ссылка активная - когда на нее нажали. Отпустили - неактивная. Используйте a:visited Но тут возникает проблема, что при обновлении страницы он останется в таком же состоянии. Я бы копал в сторону JS 0