Форум программистов, компьютерный форум, киберфорум
Наши страницы
kisk
Войти
Регистрация
Восстановить пароль
Оценить эту запись

Обработка события click на CSS

Запись от kisk размещена 17.05.2015 в 14:49
Обновил(-а) kisk 18.05.2015 в 09:27
Метки click, css, focus, html

Нажатие на элементе переключает :focus на него, если ему будет присвоено tabindex="n".
В результате элементы с классом .orange или .green покажутся.
Нажатие в другой области экрана приведет к сбросу фокуса с элемента и восстановит состояние по умолчанию для элементов с классом .orange и .green
В данном случае стиль display я убрал, т.к. анимация с ним не работает.
Оставляйте комментарии, если квадраты можно ещё каким-то способом расположить в таком месте. Спасибо заранее!

Пример: http://output.jsbin.com/tocogi/3

html и css код
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="square-red" tabindex="0"></div>
    <div class="orange"></div>
    <div class="square-blue" tabindex="1"></div>
    <div class="green"></div>
  </body>
</html>
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
* { transition: all .5s; }
 
.square-red,
.square-blue {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
 
.square-red { background: red; }
.square-blue { background: blue; }
 
.orange,
.green {
  width: 200px;
  height: 200px;
  opacity: 0;
  position: absolute;
  left: 28px;
}
 
.orange { background: orange; top: 8px; }
.green { background: green; top: 28px; }
 
.square-red:focus ~ .orange,
.square-blue:focus ~ .green { opacity: 1; }
Размещено в css, web
Просмотров 756 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru