Есть, допустим, один элемент. Каким псевдоклассом можно сделать, чтобы при клике на этот элемент, появлялся border: 1px solid white
и оставался на этом элементе, пока я не кликнул на другой? Кажется, при помощи active
, но не получается.
3 ответа
Элементы DIV могут получить фокус, если установить атрибут tabindex.
.thumb-1:focus { border: 1px solid red; }
<div class="thumb-1" tabindex="1">...</div>
Можно через :focus попробовать, но не думаю что этот способ подойдет везде. Тот же jQuery toggleClass(), на мой взгляд, будет надежнее.
body {
background: #555;
color: #fff;
}
.thumb-1 {
width: 97px;
height: 67px;
float: left;
}
div.thumb-1:focus {
border: 1px solid white;
/*Еще нужна эта строчка*/
outline: -webkit-focus-ring-color auto 0px;
;
}
<div class="thumb-1" tabindex="0">Нажми на меня</div>
-
-
-
.thumb-1{ width: 97px; height: 67px; float: left; } .thumb-1:focus{ border:1px solid white; } никакого результата не дало– AntonCommented 14 авг. 2017 в 6:00
-
Нужно к .thumb-1 добавить tabindex="0". И в .thumb-1:focus переписать outline, который по дефолту outline: -webkit-focus-ring-color auto 5px;. Я добавил код вверхнем ответе.– NoytCommented 14 авг. 2017 в 6:46
Один из возможных способов - использовать псевдокласс target.
#qwe:target {
outline: 1px solid black;
}
<div id="qwe">Вот ваш элемент, щёлкните <a href="#qwe">сюда</a></div>