Вызов процедуры как в hover и active

@Scriptozaur · Регистрация: 11.10.2015

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

Есть ли еще какие-нибудь способы вызова изменений в классе, кроме hover и active? Может, их можно самому придумать, и как их потом вызывать? Через javascript?

@Karssen · 09.12.2015, 09:43

http://htmlbook.ru/css/cat/pseudoclass у псевдоклассов и так довольно внушительный список.

@Scriptozaur · 09.12.2015, 17:37 **[ТС]**

Karssen, это хорошо, конечно. А теперь давайте представим ситуацию: у меня есть кнопка и какой-то объект, имеющий класс. Также есть анимация. Как при нажатии на кнопку, заставить объект воспроизвести анимацию?

@Karssen · 09.12.2015, 17:43

нажатие это javaScript и сделать через js это несложно. Хотя на кнопке можно попробовать и через focus сделать, без сриптов.

@Scriptozaur · 09.12.2015, 18:28 **[ТС]**

Karssen, я с js знаком, тогда напишите, как сделать это на js

Добавлено через 14 минут
Karssen, а если можно и без скриптов, то покажите как обойтись без них. Потому что я в css вообще чайник

@Karssen · 09.12.2015, 18:55

http://jsfiddle.net/0d69h17x/ Ну вот в этмо примере работать будет только на фокусе по кнопке. Это если без скриптов

HTML5
1
2
3
4
5
<div class="example">
  <button class="example-button">Нажималка</button>
  <div class="example-experemental"></div>
  <div class="example-experemental second"></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
.example{
  background-color:#999;
  width:250px;
  height:250px;
}
.example-button{
  color:#111;
}
.example-button:focus ~ .example-experemental{
  animation-name:boom;
  animation-duration:0.5s;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
}
.example-experemental{
  background-color:#fff;
  width:50px;
  height:50px;
  margin:40px;
}
.example-experemental.second{
    margin:-90px 0 0 150px;
}
@keyframes boom{
  from {transform:translateX(0); background-color:#fff;}
  10% {transform:translateX(5px);}
  20% {transform:translateX(0);}
  30% {transform:translateX(-5px);}
  40% {transform:translateX(0);}
  50% {transform:translateX(5px); background-color:red;}
  60% {transform:translateX(0);}
  70% {transform:translateX(-5px);}
  80% {transform:translateX(0);}
  90% {transform:translateX(5px);} 
  to {transform:translateX(0); background-color:green;}
}

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера 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, то после закрытия окошка. . .

Вызов процедуры как в hover и active

Решение

Решение

Решение

@Scriptozaur 3 / 3 / 4 Регистрация: 11.10.2015 Сообщений: 156

	Вызов процедуры как в hover и active 09.12.2015, 06:52. Показов 2188. Ответов 5 Метки нет (Все метки) Есть ли еще какие-нибудь способы вызова изменений в классе, кроме hover и active? Может, их можно самому придумать, и как их потом вызывать? Через javascript? 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	09.12.2015, 09:43
	Сообщение было отмечено Scriptozaur как решение Решение http://htmlbook.ru/css/cat/pseudoclass у псевдоклассов и так довольно внушительный список. 1

@Scriptozaur 3 / 3 / 4 Регистрация: 11.10.2015 Сообщений: 156
	09.12.2015, 17:37 [ТС]
	Karssen, это хорошо, конечно. А теперь давайте представим ситуацию: у меня есть кнопка и какой-то объект, имеющий класс. Также есть анимация. Как при нажатии на кнопку, заставить объект воспроизвести анимацию? 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	09.12.2015, 17:43
	Сообщение было отмечено Scriptozaur как решение Решение нажатие это javaScript и сделать через js это несложно. Хотя на кнопке можно попробовать и через focus сделать, без сриптов. 1

@Scriptozaur 3 / 3 / 4 Регистрация: 11.10.2015 Сообщений: 156
	09.12.2015, 18:28 [ТС]
	Karssen, я с js знаком, тогда напишите, как сделать это на js Добавлено через 14 минут Karssen, а если можно и без скриптов, то покажите как обойтись без них. Потому что я в css вообще чайник 0