0

Есть, допустим, один элемент. Каким псевдоклассом можно сделать, чтобы при клике на этот элемент, появлялся border: 1px solid white и оставался на этом элементе, пока я не кликнул на другой? Кажется, при помощи active, но не получается.

3 ответа 3

3

Элементы DIV могут получить фокус, если установить атрибут tabindex.

.thumb-1:focus { border: 1px solid red; }
<div class="thumb-1" tabindex="1">...</div>

0

Можно через :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>

4
  • нет, нужно как то без Jquery обойтись
    – Anton
    Commented 14 авг. 2017 в 5:44
  • Тогда попробуйте Фокус
    – Noyt
    Commented 14 авг. 2017 в 5:48
  • .thumb-1{ width: 97px; height: 67px; float: left; } .thumb-1:focus{ border:1px solid white; } никакого результата не дало
    – Anton
    Commented 14 авг. 2017 в 6:00
  • Нужно к .thumb-1 добавить tabindex="0". И в .thumb-1:focus переписать outline, который по дефолту outline: -webkit-focus-ring-color auto 5px;. Я добавил код вверхнем ответе.
    – Noyt
    Commented 14 авг. 2017 в 6:46
0

Один из возможных способов - использовать псевдокласс target.

#qwe:target {
    outline: 1px solid black;
}
<div id="qwe">Вот ваш элемент, щёлкните <a href="#qwe">сюда</a></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.