Нажатие на элементе переключает :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; } |
|
|
